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)
Free download: brokeinsummer....
Artists: brokeinsummer.com
Contact: brokeinsummer....
Music provided by Audio Library Plus
- Get Elementor Pro here --- trk.elementor....
-- Of course, we're affiliated to them, but it helps to pay for resources to keep creating ace content for you :)
-- Book an Appointment/Consultation: calendly.com/i...
-- LinkedIn: / imran-siddiq-7320a74a
-- Instagram: / batswebsitedesign
-- Twitter: / imranwebsites
-- Facebook: / websquadrontraining
PS: websquadron.co.uk
PPS: Contact us at [e-mail]
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?

[@websquadron]

Yes if you apply the css to show and hide when you hover

[@adied7725]

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

[@SamWereb]

Nice. What about on mobile devices?

[@websquadron]

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.

[@simeonnenov3499]

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!

[@websquadron]

You would assign it with different class names per column to keep the products/images grouped up. Add @media and then the necessary max-width code before the css code that I’ve used.

[@simeonnenov3499]

@@websquadron Thank you very much!

[@roppor2194]

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. 🙂👍

[@websquadron]

Indeed. Unfortunately because we’re using EL’s add to cart for that - it would go to a new page. Might need a separate plugin to achieve what you want.

[@madetomuve]

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

[@websquadron]

If you add a class name - let' say .useimagecss and then ensure that the relevant widget has that name.

[@madetomuve]

@@websquadron I've tried that but the effect happens on the whole page not just the image?

[@tlwebdesign1]

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

[@websquadron]

Flip boxes could be an option and use absolute positioning