fbpx
Facebook

Tutorial

Both Show & Hide Elements on Hover

Uses Plugins

Elementor Free
Elementor PRO
Crocoblock JetEngine

Video

Play Video

Description

Inspired by a question in the Crocoblock Facebook Community I have made this Tutorial

t.ly/k3FL ( Note you need to join the group )

The author was asking how to get the button show/hide effect on items on this page https://crocoblock.com/features/

This tutorial expands on this a bit and shows how to either show or hide any element when a Parent element is hovered.

We will use a JetEngine Listing Grid to demonstrate.

Steps

  1. CSS Rules
  2. Listing Item
  3. JetEngine Listing Grid
1

CSS Rules

Copy and Paste the CSS below to your preferred location.

2

Listing Item

  1. Create a JetEngine Listing Item
  2. Add the Widgets that you want
  3. Add the class "wpg-visible-hover" to the "Container" you want to detect Hover on. E.g. Section / Column etc.
  4. Add the class "wpg-visible-mouseover" to any Widget you want to be visible on Hover.
  5. Add the class "wpg-visible-mouseout" to any Widget you want to hide on Hover.
3

JetEngine Listing Grid

  1. Add a Listing Grid to a page
  2. Select the "Listing" you created above
  3. Edit the CSS variables to get your desired result.

 

Code (click to copy)

CSS (css)

  • If you have Elementor Free, Paste it into Customize -> Additional CSS
  • If you have Elementor PRO, Paste into Site Settings -> Custom CSS

Notes:

  1. CSS rules below are prefixed with "wpg-".  Always prefix your rules with something unique.  This will prevent clashes with CSS rules from Themes and Plugins.
  2. We use "max-height" for the animation/transition. The reason is that "height" does not transition.

Change the variables to get your desired results.

.wpg-visible-hover {
    --show-duration: 1s;
    --hide-duration: .3s;
    --max-height: 400px;
}

.wpg-visible-hover .wpg-visible-mouseover{
    max-height: 0;
    opacity: 0;
    transition: all var(--hide-duration);
}

 .wpg-visible-hover:hover .wpg-visible-mouseover{
    max-height: var(--max-height);
    opacity: 1;
    transition: all var(--show-duration);
    overflow: hidden;
}


.wpg-visible-hover:hover .wpg-visible-mouseout{
    max-height: 0;
    opacity: 0;
    transition: all var(--hide-duration);
}

 .wpg-visible-hover .wpg-visible-mouseout{
    max-height: var(--max-height);
    opacity: 1;
    transition: all var(--show-duration);
    overflow: hidden;
}