In this tutorial, I’ll show you how to add a slide-in image on hover effect on your images in Elementor using the premium addons.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Video: Elementor Slide in Image on Hover Tutorial
What You’ll Need to Create Elementor Slide in Image on Hover
To be able to create a fade-in hover effect on your images, you’ll need the pro version of the Premium Addons for Elementor, this is how you’ll have access to the iHover widget which will enable you to add hover effects to your images or text in Elementor.
With your Premium Addons for Elementor installed and activated, you’ll be able to see a list of addons, find the iHover addon and enable it (make sure it’s green).
To Read: 3 Ways to Add a Click To Call in Elementor (No Other Plugin)
Create A Hero Section with Heading and Background
In your Elementor editor, add a new 2 column section (00:11)
Select your section, in the Edit Section area on the left, go to Layout > Height, set it to Minimum Height, and give it 100 VH.
Go to your Widgets area and drag a Heading widget to your first column (00:25), under Content > Title, type in your heading text, for example, “Slide in Image on Hover”.
Under Style, set text color to white, under Typography set the font to Oswald and Size 6.5 EM. Set the Weight to 900 and Transform to uppercase (00:52)
To make the text visible let’s add a background image.
Select the section, go to Style > Background Type, go to the choose image and go to your Media Library to choose a background image, insert your image (01:01).
On the Size option choose Cover. Under Background Overlay, add a black color and set its Opacity to 0.57.
To Read: Create Responsive Elementor Cards with an INNER Section Inside an INNER Section
Add Slide in Image on Hover
Note that to be able to add a hover effect to your images you need the iHover widget, and this is only accessible to pro users of the Premium Addons for Elementor.
If you have your iHover widget enabled, go to the Widgets area in your Elementor editor, search for the Premium iHover widget and drag it to your second column (01:47)
In the Edit Premium iHover area on the left, go to the Choose Image option to select your first image from your media library and insert it. Set Border Radius to 0 (02:00).
Go to Content, enable the Icon option, then under Icon Type, choose the Image option. On the Choose Image option, go to your media library and insert the image that’s going to appear on hover.
Under Icon Size, set it to 100%, disable the Title option since we don’t want to display any text or title on the image.
Back to your Image option, go to Hover Effect and select Slide in Image from the dropdown (02:48)
After selecting the slide in image option, click the Publish button, then preview (03:00).
Also Read: How PX, EM, REM, %, VW, VH Work In Elementor
Elementor Slide in Image on Hover Responsive Settings
Back to your Elementor Editor, select your section then go to your Responsive mode at the bottom (03:26).
Select the Tablet device;
Under Style >Typography, reduce the heading size to 4.5 EM.
Under Advanced > Padding, unlink the padding values then add 20 pixels on the left.
Select the section, under Layout > Minimum Height, reduce it to 50 VH (03:48)
On the Mobile Device;
Under Style >Typography, reduce the heading size to 2.9 EM.
Under Advanced > Padding, unlink the padding values then add 20 pixels on all sides (04:10)
When you’re done just update.
In Closing
And your Elementor slide in image on hover is all done and working pretty well on all devices!
For any comments or questions use the comments section below. Remember to subscribe to my newsletter and Youtube channel for more tips and tutorials.
