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.
Awesome Elementor Sticky Text Within Column Design
A member in the Facebook group asked me if this was possible. Yes it is! It does require Elementor Pro though. Get the template here. (right-click > download as) To
Elementor Hide Header on Scroll Down - Show on Scroll Up
[View Demo] Easily make your Elementor sticky header hidden on scroll down, and show while scrolling back up the page.
Simple Elementor Media Carousel With Text Captions !
How to add elementor media carousel text captions using CSS only! No plugins needed! First, add Captions to every ‘Slides’ in the Elementor Media Carousel Place various inner sections in