Reveal / Show Anything on Hover in Elementor Without a Plugin - Horizontal and Vertical - WordPress

The CSS required to do this is pinned 📌 to the top comment.

What I use to build amazing websites:
Elementor (the best WordPress page builder): https://be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): https://www.hostg.xyz/SHBd2

Change the Colors (and More) of Icons, Headings, Text When Hovering Over the Container in Elementor -    • Change the Colors (and More) of Icons...  
Advanced Elementor Hover Effects - Rotate, Resize or Move Anything From a Specific Point - No Plugin -    • Advanced Elementor Hover Effects - Ro...  
Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW -    • Elementor Units Explained - How and W...  

🧙 Wizards of Webcraft – A series where I’ll be reviewing your websites - https://www.reialesa.com/wow/ Apply now!

Revealing or showing something on hover is a very cool, very practical effect. We're going to go over how you can reveal anything when you hover over the container it's in - text, icons, images, even whole containers. Which includes anything that is inside of those containers, which means you can use this reveal effect for any kind of content. You can even show products on hover, which will help you make your online store more interesting.

And the effect can be horizontal or vertical. The reveal effect is fully responsive as well. I personally love using it to create cool, interesting menus or clickable content.

We're going to take a look at how you can do this in Elementor directly but since this is a CSS effect, you can use it anywhere, including with other WordPress page builders. It's very simple and once you understand the logic behind it, you can replicate it and use it on any one of your websites.

#revealonhover #reveal #elementor

CHAPTERS:
00:00 - Intro
00:44 - Horizontal reveal effect setup
02:00 - Adding in the CSS
02:29 - Explaining the CSS
04:40 - Adjusting the CSS
05:26 - Adjusting the speed
05:36 - Applying the effect to multiple containers
06:00 - Vertical reveal effect setup
07:11 - Adding in the CSS, preparing the content
08:08 - Adjusting the CSS
08:56 - Fixing the page movement issue
09:30 - Making the horizontal reveal responsive
10:59 - Making the vertical reveal responsive
11:45 - Making the containers clickable

Get in touch:
https://www.reialesa.com/youtube/

Don’t be shy! Let me know what you’d like to see next, ask me anything related to design or just simply say hi.

Please note that some of the above are affiliate links, which means I earn a commission if you make a purchase, at no additional cost to you. Thank you very much if you decide to use them!