Elementor - Reveals Details/Images/Videos when you hover on a Section. Great for Featured Products.

How about revealing further information, videos, images, text, buttons, etc when you hover on a Section.

Add this code to the Section - Advanced - CSS:
/*Hide Content Initially*/
selector .imageshow{
opacity: 0;
transition: 0.7s ease-in-out;
}
/*Show Content on Hover*/
selector:hover .imageshow{
opacity: 1;
}

On mobiles - you’d remove the movement with a @media query or you would set it differently with placement. I would advise not doing it on the mobile. Some things are best left for the desktop or tablet only.

Music used:
Track: Will You Be Mine (Remix)
Music provided by Audio Library Plus

-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)

PPPS: We only build with Elementor Pro

[einatblackrose]

Tip for mobile: just put this code in @media(MIN-width: ##), adjust to whatever works with your layout. That's easier and shorter (and a much better practice in general) to only apply the code for where you need it than to set the code, and then try to reverse it on smaller screen sizes.

Here is an easy notion to keep in mind: the default layout in mobile is usually just what we need it to be, and then we mess it up when we go fancy... Just do the fancy stuff in @media for larger screens from the first place.

Hope that's helpful.

[Critterles]

Great effect and video. Question: Is there a way to have 2 images stacked in the same column and one image shows until it is hovered and then the second image shows while the first image disappears?

[adied]

Hi Iran... How would you achieve this hover effect for just an image that when hovered over shows the video?, please.
I'm also concerned of page speed, is there a way for the video not to auto play, yet when hovered over it plays... From wherever

[tlwebdesign]

how can I do this for a auditorium that has seating and they can mouseover to see the different prices.

[madetomuve]

Is there a way to make this work in your global CSS rather than putting the CSS on each and every container?

[simeonnenov]

Awesome effect! Thanks for sharing! When you say "On mobiles - you’d remove the movement with a @media query". How do you deactivate certain css code only on mobile?
And 1 more question if possible. How would you do this if you dont want the hidden elements to be on the page. For example, you have a section with 3 columns with 3 products, and when you hover on each product, different images and videos appear. Maybe with a pop up with some dynamic links? Thank you!

[roppor]

I'm really impressed, it looks like good marketing, I think everyone will be interested in how you designed these blocks. I would add a button here (buy in one click), and after clicking on it, the user remains on the same page, but at the bottom there are checkout fields, or a popup in free space. Put out a small tutorial on this design, and add my idea to the review. 🙂👍