Create a Custom Pop-Up on Hover
No extra plug-ins required! Elementor Free Compatible.
Get help now!
Custom designed sections and elements.
[x]
[close]
[close]
To begin with, create a PNG* of what you want to show up when you will hover, and place it exactly where you will want it to be
In this example, I used absolute positioning to get it behind my pastas. Probably you will need to use absolute positioning also. Be careful with it, and adjust for different screen sizes.
*Important: This will also work with anything else, like Texts elements, vector graphics, icons… even an entire Elementor section. Just be careful with the positioning settings and mobile settings (You will probably want to hide that pop up for mobiles, in case they click on the trigger element). In this example a PNG image was used.
When you got the pop-up exactly positionned where you want, give it a class of hovershow
Then, give a class and a z-index value to the trigger element
Here I set z-index:11 and gave it the class ‘pastas’.
Then, insert an HTML element, and add the code below
Replace the ‘pastas’ instances with the actual class you gave your trigger element.
<script>
jQuery(document).ready(function( $ ) {
$(‘.pastas’).on(‘mouseenter’, function() {
$(‘.hovershow’).fadeIn();
});
$(‘.pastas’).on(‘mouseleave’, function() {
$(‘.hovershow’).fadeOut();
});
});
</script>
<style>
.hovershow{
display: none;
}
</style>
You can also simply download the template directly from my Templates page. Use the Navigator to see the image that only shows when hovered.
Et voila! Thanks for reading!
Enjoyed this tutorial? Get more awesome designs, right in your inbox!
No spam, not more than one weekly email.
Elementor Close Menu On Click Outside Easily
This tutorial will teach you how to close the mobile toggle Elementor menu on clicking outside of it. You will see, it’s pretty simple to get this Elementor close menu
The Greatest Elementor Addons In 2022 (And Those To Avoid)
With Elementor, you can build stunning WordPress websites and landing pages. Whether you’re a freelance designer, a business owner, or a marketing agency, the page builder gives you the ultimate
Elementor Vertical & Smooth Image Carousel
Zoë Tame asked me to help out with this. She shared with me that website, from where she wanted a similar image carousel. I was able to replicate this by
