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.
Easy Elementor FAQ Schema Integration!
Schema markup is code that you put on your website or blog to help search engines show more informative results for users; this form of SEO optimization is very powerful.
Simple Elementor Animated Border For Any Element!
Let’s learn how to add this awesome border animation to any Elementor element! To begin with, copy this code under Advanced > Custom CSS for your target element. This will
Change Elementor's Default Menu Icon
Change Elementor’s Default Menu Icon No extra plug-ins required! Elementor Pro Required. Many people are wondering how to import their own icon to use as menu, or how to use