Elementor Slide in Image on Hover using Premium Addons

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

TrkwNe6u7lW6j17SEqBEi5r3 LimomKh0 oTi5 Z73fNL W2OLmZkrGgUwJGqfhTuwV6hI DQrDtsL Irbc69yLO37OoGq3tVvoms1ghHeZ5G33eFRHwlF SLUaP3DcgUW1WZC1V

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)

Kb7 A0h5l9yQtkF2xUKlkJxp9PkgWFaeeag9UmcgWfmGXRhzf5754lAv1T3phWfMC8iJUujmnKTzuV0 GV6KPxMNMtth98QmNOvPSPpA9h yD wHlX5afJbreT5gYUHzPpOuucw
4oLw4ck7qToL1 TvKeVVktc0bC3qPQ4xsNt4HOmJ3r2y 9 JxXnO1F5wafV5V3 G UmMLlR8fY61DyeT9jXuJkwMuwHes2xZ

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”.phQsPocNmP9haC85Lgu6GXo5n6MYfqffNPrb GKkxymNenXYi1F IapedL dzWaDSAOOiX7 Uppg

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)

6l8h7cinotMxGByxdTCJi6NZ5Yp0GRxhllDhOTNtq5nXUkMrVwF6rLBF0nS5RQW6Cd08M1kKjcLsOTdKJJXP2u SNtgwT2Etv8EneSEvkVljXhe8h1ZqLhdar56Hc8EKqe 7RmEk

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.

sevh Oh 4u8h68D48Oex2KbNpvPXjRGaIi4d9IVIKSg620CKmBTxnw5zpxpZ3k Q6ne

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)

A3Mry9A6WNRg9iFgUtNDe6ymj82KmGzZd3gBU olk fxzVEHrjK3tKiqqggWN7GrfH3c8havzZ I bvO rBhS4ItoEq5BLIdnlNDdrM tQmSkhHo66oZtocUzyo8dRJw175FcS0r

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

nkNA9utR8juVUo3rsI7LWLuIoBYcQKHpMRhflQw Ph4boYCU4e2iKyb EpMSwim agjYwoM9SSEOmx1ilz3NLWC9hz3LSG9sKqr5w9gN50qF6qeNMvdeASm6E4f3iwXOa SISlW

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)

k7kW3sbbJxWPwcyd66YzvHpgsyT 3PVtNvklvb9tdHe9pf8FdyxYVADq9vitpg5BCk0hgYM7mPJ3wqh
y2Qmvypc7QNUSXeucmhcb9ZGcA5O0wBQ4DDAGtx008iZtjFr0xdUQN13tAAt9

After selecting the slide in image option, click the Publish button, then preview (03:00).

OUNnPKZSIciqAjevNirdXI7k8f0qWja7OxSR8eHTbTWjA0ot2r nAHmzLlCNg9QnADX86MHwEwI1hrqLbxErGIb6 gqkIFfXK 6kKIP4xSXBp9BK49WG2P55sItyNeus1tlrHy9

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

AIRUlSj49Af5x2e51YRSzOEK6 IrqMsbxhja8R1UV 52arg6AfMyPYdRdXbR

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)

B2c3Th7Ednh4Xb1cVS oDUEHR XX7meSjsUl5mCynnn308VSuhgysAGSQEF7bX1MKFRDKMCEXrVtnPN6Z5wNgeq0YRfsPk 7dV6WoEFigqcA01AxcrFAJyKzhUYWpnu 7QDPXUDj

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)

Elementor Slide in Image on Hover GIF

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

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

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users