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.
Create a Netflix-Like Elementor Horizontal Scroll Section
This is how you can easily create a smooth slider that doesn't automatically skips to the upcoming item. Similar to Netflix.
Easy Elementor Scrolling Text Boxes, Columns, Sections & Elements
Learn how to easily add a vertical scroll bar to any Elementor element, column or section.
Create Elementor Tabs With Horizontal Scroll For Mobile Users
Facebook apps uses this, Uber Eats, why not you? Give mobile user a great UX by having a lot of content displayed in a discrete manner! No more clutter!