Create a Custom Elementor Hover Popup

No extra plug-ins required! Elementor Free Compatible.

Someone asked in the Facebook group how to create a pop-up when you hover a specific section or image. Here is how.

Working examples:

Awesome Elementor Hover Popup Technique
Awesome Elementor Hover Popup Technique

Yummy Pastas!
$7.99

Design

Marketing

Awesome Elementor Hover Popup Technique
Awesome Elementor Hover Popup Technique
Awesome Elementor Hover Popup Technique
Awesome Elementor Hover Popup Technique
Awesome Elementor Hover Popup Technique

Dev System

Support

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'.

Finally, 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.

The smartphone example is done the same way. It uses overlapped images with negative margins. Each icon has it's own code.

Et voila! Thanks for reading!

Leave a Reply

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