Reveal / Show Anything on Hover in Elementor Without a Plugin - Horizontal and Vertical - WordPress
ฝัง
- เผยแพร่เมื่อ 2 มิ.ย. 2024
- 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): be.elementor.com/visit/?bta=2...
Awesome, affordable hosting (the server your website needs to exist): www.hostg.xyz/SHBd2
Change the Colors (and More) of Icons, Headings, Text When Hovering Over the Container in Elementor - • Change the Colors (and...
Advanced Elementor Hover Effects - Rotate, Resize or Move Anything From a Specific Point - No Plugin - • Advanced Elementor Hov...
Elementor Units Explained - How and When You Should Use PX, REM, EM, %, VH and VW - • Elementor Units Explai...
🧙 Wizards of Webcraft - A series where I’ll be reviewing your websites - 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:
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!
![โอ้มายก๊อด! ไม่ถึงชั่วโมงหมดเป็นแสน 😅 [cc] แดนแพทตี้ SS2 | EP.42 |](http://i.ytimg.com/vi/OH2ShXfO6tA/mqdefault.jpg)
The CSS required to do this 👇
.container {
background-color: #E2DFFE;
transition: all 0.3s ease-in-out;
}
.container:hover {
background-color: #FFFFFF;
}
.reveal {
transform: scale(0);
opacity: 0;
transition: all 0.3s ease-in-out;
width: 0;
}
.container:hover .reveal {
opacity: 1;
transform: scale(1);
width: 14%;
}
.visible {
transition: all 0.3s ease-in-out;
width: 100% !important;
}
.container:hover .visible {
width: 86% !important;
}
/* Adjust the horizontal reveal effect on mobile */
@media only screen and (max-width: 767px) {
.container:hover .reveal {
width: 40% !important;
}
.container:hover .visible {
width: 60% !important;
}
}
/* Disable the horizontal reveal effect on mobile */
@media only screen and (max-width: 767px) {
.container:hover {
background-color: #E2DFFE;
}
.container:hover .reveal {
opacity: 0;
width: 0;
}
}
/* Adjust the horizontal reveal effect for tablets */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.container:hover .reveal {
width: 25%;
}
.container:hover .visible {
width: 75% !important;
}
}
/* The vertical reveal effect 👇 */
.revealvertical {
transition: all 0.4s ease-in-out;
max-height: 0 !important;
}
.container:hover .revealvertical {
max-height: 230px !important;
}
@media only screen and (max-width: 767px) {
.container:hover {
transition: none !important;
}
}
/* Adjust the vertical reveal effect on mobile */
@media only screen and (max-width: 767px) {
.container:hover .revealvertical {
max-height: 330px !important;
}
}
/* Disable the vertical reveal effect on mobile by hiding the class getting revealed */
@media only screen and (max-width: 767px) {
.container {
background-color: #E2DFFE;
}
.container:hover .revealvertical {
max-height: 0 !important;
}
}
/* Disable the vertical reveal effect on mobile by making it always revealed */
@media only screen and (max-width: 767px) {
.container:hover {
background-color: #E2DFFE;
}
.revealvertical {
max-height: 230px !important;
}
}
/* Adjust the vertical reveal effect for tablets */
@media only screen and (min-width: 767px) and (max-width: 1024px) {
.container:hover {
background-color: #E2DFFE;
}
.container:hover .revealvertical {
max-height: 150px !important;
}
}
/* Make sure you like the video, subscribe to the channel and check out some of my other videos as well ;) */
What I like more about this is how clean and nice the design is.
Most TH-camrs explaining similar tricks just throw in some random elements and call it a day.
I think making the design look good really helps give context to the tutorial itself and helps get the viewers excited about the possibilities. Which makes learning that much more exciting as well. I really appreciate that you noticed the effort I put into the design and that you pointed it out, thank you! 🙌🙏
Absolutely awesome, you rock! You are the best tutor I have heard for a very long time. Clear, eloquent and very systematic. Keep on the good work, and thank you.
That's amazing to hear! I'm really glad you like my way of explaining things. Thank you very much, I truly appreciate it. 🙌🙏
Appreciate the presentation keeping it just to relevant information, very helpful, thanks!
@Reialesa revisiting this tutorial - can you share how to make the visible container - or visible icon - clickable to reveal, rather than hover?
amazing, thanks!!!
I'm happy to help! Thank you for your support Beatriz, I appreciate it. 🙏
very helpful video. How can i use it on the menu. For instance If I am using a mega menu or or pull the wordpress menu items how can I hide/reveal the icon with the menu item?
Very cool, thanks!
I'm glad you think so, thank you for your support! 🙏
Thanks, great tutorial. Could you use this setup to open up a side panel where you could interact with elements, buttons etc.?
Thank you for your kind words! 🙌 Yes, you could. It might be a little bit annoying to users if they accidentally moved their mouse and closed that panel. But otherwise, it really doesn't matter what exactly you put into the containers you're revealing.
looks promising
Thank you! I hope you'll find it useful if you decide to try it. 🙌
I watched it to the end, but I still didn't understand how to insert icons and animations into the menu, it would be good to show it in a video and explain it. I hope to see an addition to this menu guide very soon.
That's a good question! It's actually the exact same process, the trick is to use regular containers, that you add links to, for your menu. For dropdowns and complex layouts, you can combine it with Elementor's new mega menu, which is based on containers and it gives you way more control over your content than the old menu widget. Of course, for mobile, you can just build out your menu as you normally would, using the ''WordPress Menu'' widget (the old menu widget). You could even try a version of this for mobile, if it's viable in your case.
I hope I answered your question. Let me know how it goes! 💪
@@Reialesa So, these are fake buttons made from containers.
Well, if it looks like a button and it works like a button - is it not a button? 😁 There's no way to achieve this effect without being able to add in two elements inside of the button and in Elementor, that means you have to use containers. The mega menu, which is still in alpha, is based on containers.
And there's no way to add individual icons to the standard menu widget. For the button widget, you can add in icons and they can also be animated following the same process, you just need the proper selectors which you can get by inspecting the CSS. But in my experience, it's more complicated, the effect is harder to control and it doesn't work as well.
@@Reialesa Great tutorial. Thanks for the feedback.
I'm happy to help, thank you for your support! 🙌