Create a Custom Pop-Up on Hover

No extra plug-ins required! Elementor Free Compatible.

Get help now!

Custom designed sections and elements. If you have seen it somewhere, I can build it for you! Probably.

Custom designed sections and elements.

[x]

[close]

Like my work?

You can make a donation! It helps to keep the project going!

[x]

[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

Awesome Elementor Hover Popup Technique

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!

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Support me>

Support my work by buying Elementor Pro , or addons, through my links

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>

Leave a Reply

Your email address will not be published. Required fields are marked *