Change Background Image on Hover is a simple yet powerful way to add interactive visuals to your Elementor designs. Whether you’re highlighting services, showcasing products, or creating a more engaging section layout, this effect instantly makes your website feel more dynamic. By using the Unlimited Elements Background Switcher widget, you can smoothly swap images as users hover over elements, giving your sections a modern, immersive, and visually appealing look.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Background Switcher widget to your Elementor website
To change the background image on hover in your Elementor website, install the Background Switcher widget from the Unlimited Elements Widget library.
Step #3: Change background image on hover in your Elementor page
Now, in the Elementor editor, find the Background Switcher widget and drag it to the desired part of your page.
Items Source
Choose the Items Source from the dropdown. You can select from:
Posts
WooCommerce Products
ACF Repeater Fields
JSON / CSV Files
Gallery
Terms
Users
Menu Items
and more.
The “Items” option is available in the free version, while the other dynamic sources require the Pro version.
For this tutorial, we’ll use static data and add content through the Items Repeater.
General Settings
Layout
Choose the desired layout:
- Flex
- Grid
Direction
Choose the direction of items:
- Horizontal
- Vertical (Pro)
Vertical Direction on Mobile (Pro)
Toggles whether items switch to a vertical layout on mobile devices for better readability.
Animation In Duration
Controls how long the entry animation takes when an item appears.
Animation Out Duration
Controls the duration of the exit animation when an item disappears.
Show Title
Displays or hides the title of each item.
Show Description
Show or hide the description of each item.
Show Button (Pro)
Displays or hides a button within each item.
Button Text
Defines the label text shown on the button (e.g., “Read More”).
Responsive Breakpoint
Sets the screen width at which the layout switches to mobile or tablet styles.
Direction
Determines the reading direction (Left-to-Right or Right-to-Left) for horizontal layouts.
Split Mode Desktop (Pro)
In split mode each box will have its own image and on hover all boxes will have the active image.
Split Mode Mobile (Pro)
Enables or disables split mode behavior on mobile devices.
Item Image Size
Sets the size or resolution of images used for each item to balance quality and performance.
Show Initial Selected (Pro)
Determines whether one item should appear selected when the page loads.
Initial Selected
Specifies which item (e.g., first, second) should be selected initially.
Title HTML Tag
Allows choosing the HTML tag used for item titles (e.g., h2, div, span) for semantic or styling control.
Enable Link on Title
Makes the title a clickable link leading to a specified URL when enabled.
Show Image in Content
Displays or hides the image inside the content area, useful for compact layouts.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Items Settings
Image
Defines the primary background image for the item.
Image Size
Determines the resolution or size of the background image.
Image Position
Controls the placement of the background image (e.g., top-left, center, etc.).
Title
Sets the main heading for the item. It can also be dynamically sourced using the dynamic tag option.
Image In Content
Adds a separate image within the content area for additional visual context.
Image In Content Size
Sets the size or resolution of the inner content image.
Description
Provides a detailed text description for the item, with the option to pull from dynamic content.
Button Text
Defines the label or text shown on the button.
Button Link
Assigns the URL or link destination that the button directs to when clicked.
Wrapping it Up!
Adding a hover-based background change effect in Elementor is an easy way to elevate your design and make your content stand out. With just a few tweaks, you can create dynamic interactions that guide attention and improve overall user engagement. If you’re aiming to build visually rich, modern layouts, mastering this technique will help your Elementor pages feel more polished, professional, and uniquely immersive.
