Tutorial

2 x Reveal on hover methods

Video

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.

Elementor Image Box Widget

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

Drag an Image Box Widget to the editor
Set styles to your preferences
Add the class "reveal-wrapper" to the Widget - Advanced -> CSS Classes
Add some long text in the description
Wrap the Description text in your text

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

CSS

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

Paste to where your preference is.

Duplicate Image Boxes

Right click on the Column and duplicate a few times.

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.

Duplicate the entire section created above
Remove the "reveal-wrapper" class from the widgets, and add "reveal-widget"
Edit the description content to wrap in Your content

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);