fbpx

Tutorial

2 x Reveal on hover methods

Uses Plugins

Elementor PRO

Description

Once again inspired by questions on Facebook. This tutorial shows two ways of revealing content on hover.

The first method uses pure CSS which works well. The only issue is that it pushes other content down ad it expands.

The second option uses JavaScript and CSS. It absolutely positions a copy of the content which expands on hover. This prevents other content from being pushed down.

1

Elementor Image Box Widget

This option is pure CSS. When hovered, it pushes down the content of its column and other elements below it.

  1. Drag an Image Box Widget to the editor
  2. Set styles to your preferences
  3. Add the class "reveal-wrapper" to the Widget - Advanced -> CSS Classes
  4. Add some long text in the description
  5. Wrap the Description text in <span class="reveal-target"> your text </span>

The reason for this is that you can use the same method and classes for any other widget.

2

CSS

Copy the CSS below "CSS for first Pure CSS option"

Paste to where your preference is.

3

Duplicate Image Boxes

Right click on the Column and duplicate a few times.

4

JavaScript & CSS Option

This option absolutely positions a copy of the content and expands on hover. The benefit is that it does not push down any content below it.

  1. Duplicate the entire section created above
  2. Remove the "reveal-wrapper" class from the widgets, and add "reveal-widget"
  3. Edit the description content to wrap in <span class="reveal-container"><span class="reveal-content"> Your content </span></span>

Code (click to copy)

CSS for first Pure CSS option (css)

.reveal-wrapper .reveal-target {
    --height: 200px;

    display: block;
    max-height: var(--height);
    overflow: hidden;
    transition: all 1s;
}

.reveal-wrapper .reveal-target:hover{
    transition: all 1s;
    max-height: 100vh;
}

CSS for Second option - CSS + JS (css)

.reveal-widget{
    --height: 200px;
    --duration-in: 1s;
    --duration-out: 0.5s;
    --hover-bg-color: #000000;
}
.reveal-widget .reveal-container {
    position: relative;
    display: block;
}

.reveal-widget .reveal-container .reveal-content{
    display: block;
    max-height: var(--height);
    overflow: hidden;
    opacity: 1;
    transition: all var(--duration-out);
}

.reveal-widget .reveal-container .reveal-copy{
    position: absolute;
    z-index: 9999;
    top:0;
    left: 0;
    display: block;
    width: 100%;
    max-height: var(--height);
    overflow: hidden;
    opacity: 0;
    background: transparent;
    transition: all var(--duration-out);
}

.reveal-widget .reveal-container:hover .reveal-content{
    opacity: 0;
    transition: all var(--duration-in);
}

.reveal-widget .reveal-container:hover .reveal-copy{
    opacity: 1;
    max-height: 100vh;
    background: var(--hover-bg-color);
    transition: all var(--duration-in);;
}

JavaScript for second option (javascript)

;(w=>{
    let $, $targets;
    const targetSelector = '.reveal-container';

    w.addEventListener('DOMContentLoaded', ()=>{
        $ = jQuery;
        init();
    });

    const init = ()=>{
        $targets = $(targetSelector);
        $targets.each((i,e)=>{
            const $e = $(e);
            const $content = $e.find('.reveal-content');
            $e.append('' + $content.html() + '');
        });
    }
})(window);