---
title: "How to Change Background Image on Hover in Elementor?"
url: https://theplusaddons.com/docs/change-background-image-on-hover-in-elementor/
date: 2024-05-29
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to change the background image of an Elementor section on hover? With this effect when a user hovers their mouse over a specific element in the section,..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Change-Background-Image-on-Hover-in-Elementor_-1024x536.jpg
word_count: 458
---

# How to Change Background Image on Hover in Elementor?

## Key Takeaways

- The Plus Addons for Elementor Animated Service Boxes widget allows users to change the section background image on hover.
- Users can enable the Image Preload toggle to ensure a smooth transition between background images.
- The widget includes options to add a button, with customizable Button Text and Button Link fields when the Button toggle is enabled.

Do you want to change the background image of an Elementor section on hover? With this effect when a user hovers their mouse over a specific element in the section, the background image will automatically change, creating an interactive and engaging experience for visitors.

With the Animated Service Boxes widget from The Plus Addons for Elementor, you can easily change the section background image on hover.

*To check the complete feature overview documentation of The Plus Addons for Elementor Animated Service Boxes widget, [click here](https://theplusaddons.com/docs//animated-service-boxes-widget-settings-overview/).*

***Requirement  - This widget is a part of The Plus Addons for Elementor, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/)

To do this, add the Animated Service Boxes widget to a page and follow the steps -

1. Select **Hover Section** from the **Main Style** dropdown.

From the **Style** dropdown, you can select a predefined style.

You can enable the **Image Preload** toggle to preload all the background images so there is a smooth transition between the images.

You can select the image size from the **Image Resolution** dropdown.

You can add a button to the hover sections by enabling the **Button** toggle.

When enabled you can select a button style from the **Button Style** dropdown.

Then by enabling the **Image/Icon** toggle, you can add different image types to the service boxes.

2. In the **Animated Service Boxes** section, you have to add the content for the hover section. By default, you’ll find three items, open one item.

3. Then add a title in the **Title** field. The title will always be visible.

You can add an icon or image, subtitle and description if required from the **Select Icon**, **Sub Title** and **Description **fields.

> *Note: The Select Icon, Sub Title, Description and Button content will show on hover only.*

4. Then in the **Featured Image** section, you have to add an image for the section. 

You can edit the button text and URL from the **Button Text** and **Button Link **fields respectively.

> *Note: Make sure the Button toggle is enabled to make the Button Text and Button Link fields work.*

Following this process you can edit the other items.

You can click on the **+Add Item** button to add more hover sections.

Then from the **Layout** tab, you can manage the text alignment of the content and you can also manage the section height as well.

Then from the **Columns Manage** tab, you can manage the number of items in a row for desktop, tablet and mobile separately. You can also manage the gap between the items as well.

Now when you hover over the different titles in the section the background image will change.

***Suggested Reading***: [*How to Create an Expandable Service Box in Elementor?*](https://theplusaddons.com/docs//create-an-expandable-service-box-in-elementor/)

## Frequently Asked Questions

**Q: What should I do if the background image doesn't change on hover?**
A: If the background image isn't changing on hover, ensure that you have added the Animated Service Boxes widget from The Plus Addons for Elementor to your page. Also, check that you have selected the Hover Section from the Main Style dropdown and that the images are properly set in the Featured Image section. Enabling the Image Preload toggle can also help ensure a smooth transition.

**Q: Can I use the Animated Service Boxes widget for a portfolio showcase?**
A: The Animated Service Boxes widget from The Plus Addons for Elementor is ideal for creating engaging sections that change background images on hover. This feature can enhance a portfolio showcase by providing an interactive experience, making it visually appealing for visitors as they explore different projects.

**Q: What settings work best for smooth image transitions?**
A: To achieve smooth image transitions in the Animated Service Boxes widget, enable the Image Preload toggle. This preloads all background images, reducing lag during the hover effect. Additionally, selecting appropriate image sizes from the Image Resolution dropdown can ensure that the images load quickly and look sharp.

**Q: What happens if I forget to enable the Button toggle?**
A: If you forget to enable the Button toggle in the Animated Service Boxes widget, the Button Text and Button Link fields will not function. This means that any button you intend to display on hover will not appear, potentially reducing interactivity and engagement for your users.

**Q: Does the Animated Service Boxes widget support mobile devices?**
A: Yes, the Animated Service Boxes widget from The Plus Addons for Elementor is designed to be responsive. You can manage the number of items in a row for desktop, tablet, and mobile separately, ensuring that the hover effects and layout function properly across different devices.

**Q: Are there any limitations when using the Animated Service Boxes widget?**
A: The Animated Service Boxes widget is specifically designed to work with Elementor and does not support other page builders like Gutenberg, Beaver Builder, or Divi. This means that if you are using a different builder, you will not have access to this feature or the associated hover effects.