Elementor Fade In Background Image on Hover using Premium Addons

This post will demonstrate how you can add an Elementor fade in background image on hover effect on your images in Elementor using the premium addons.

You’ll need the pro version of the Premium addons to have access to the iHover widget which will enable you to add a number of hover effects to your images or text in Elementor.

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 Fade In Background Image on Hover Tutorial

What You’ll Need to Create an Elementor Fade in Background 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).

gVroFjXMtGy RRB3mR07xLsCusBR Q

To Read: Elementor Image Rotor Cube Effect on Hover using Premium Addons

Lets Add an Elementor Section with Heading and Background

In your Elementor editor, add a new 2 column section (00:13)

lD7Tr7CWXoMITHUaFY1vAB8R8SIOSyS0zfiqC mp mB41tw1mq8NSR r rkF7Rd7nLm d7YvYDtbxjqD4fWhwPGCfg7MLXwNYoHKNnIdmMs
PCHyKK8C6C5h8j7a3YWQzWpNZzN4 wUGHXm4Rqjx3ZFlVwDabjonWGu3dszvozruTVSDVqeS2 SUKbF4rWo3vTX

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.cYJrHXYFchtDx2MO80qBNSfOIRfqj70dbp2pPP 6hqsFKXLfSPmvqAvECbWsbf64sHXOnI0MN WpU2H83MO2AfG8mAkJmHC3NKm0bEEXD0cx6WoYc8wEZ1ybk7AgzN 6rlUb zZR

Under Style, set text color to white, under Typography set font to Oswald and Size 6.5 EM. Set Weight to 900 and Transform to uppercase (00:53)

2k887txUP4ucX0PeK2gm3xIyu sSfx45KmTZcGboYZegosTy5fKjplHJ t4zIiqz5RQC0SvET LXts9G1DGnsVoHzeVC9IymNv6 uJQFySg 0xkZ6qNr6Tk2BRzMHK

To make the text visible let’s add a background image.

Select the section, go to Style > Background Type, choose image and go to your Media Library to choose an image, insert your image and under Size select Cover (01:08). 

Under Background Overlay add a black color.

SL naMs2 6hJDpyq mKFoQ IFZ241PZcxmF0xC zu52sr5skeWJNgEZ2dB D0TZD9ilG0LsrG6OPpEjzX9scZw6gZRdeiXxWxdtAk79K zSO8f524t0GjcTuO57e1v4k4dAPsFJ0

Also Read: Create an Elementor Posts Loop with Custom Column Link

Add Fade In Image Change on Hover

Remember; 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:48)

R ZQWf7 FoQ4iJQcgjCCxEv3U HlrmXrfRk03QlJ UsygU9V2cKgt7JJJy4sTrwD205zrekRa7Uh0FB0o9y Wri2I13ZqbeZCHTMzrL S4NMTZUDbpCGSPB1M9yodWwFlfmrXWas

In the Edit Premium iHover area on the left, go to the Choose Image option to select your first image from your media library. Set the image size to 100%. Set Border Radius to 0 (02:07).

Vdq6EX2KTpRRxGEG2hJFkB14kBySsqtl9iB5x8p xA9OpHv07wNDN04Zd4zPmr 3d1ACVsuqWn7bzgyLoLoGHWWflxeXWya4RkvV1YYXwyQqR1PSuGiwvX9ebwxnLy5Y5n kE9UL

To add an image on hover;

Go to Content > Icon Type, choose Image, select an image from your library and insert it. Under Icon Size, set it to 100%, disable the Title option. 

Under Style > Container > Hover Overlay Color, set it to be transparent (02:58).

To make the 2 images more proportional, select the first image and go to Content, under Size, change to PX and give it 500 pixels.

Select the Image option, go to Hover Effect and select Faded in Background from the dropdown (03:34)

3IOKck3

Now when you hover over your image there’s a fade in background. Click the Publish button, then preview (03:49).

Elementor Fade In Background Image on Hover GIF

To Read: Create an Elementor vCard with Download Link and Contact Modal Popup

Elementor Fade In Background Image on Hover Responsive Settings

Back to your Elementor Editor, go to your Responsive mode at the bottom (03:55).

gm7GWUOyaoqRFa3IACYGIk LY3 9oLbllFSZ6CLo5LAdCs7qfxtC1mmI mZTscjfNJDWiGKJPh1P8EA69I3LLuLo8pbAL

Select the Tablet device;

Select your heading widget and under Style >Typography, reduce the heading size to about 3.3 EM.

Select the section, under Layout > Minimum Height, reduce it to 50 VH 

Select the image widget and under Size, reduce it to 75%. (04:18)c4cO NtkbIT0kbroxLmZk 8Ql v1pnbeSl U y1HKpgyyY0Xi6m7dImjTdz6gecT5OBRRYlOBAoeqtwGz1PS 39DN9flu

On the Mobile Device;

Select the heading widget and under Style >Typography, reduce the heading size to 2.5 EM.

Select the image widget, under Size, reduce it to 50% (04:39)

0qQXiNGwl0nvOPeIWKiyyT3FL4CaoWO4yn3a2C1 UhwVtQkocyw6t0RDBIqr WKD

Update and preview

In Closing

That’s how you create a fade in background image on hover in Elementor.

For any comments or questions use the comments section below. Don’t forget 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)
Picture of 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