---
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-09-21
lang: en
author: "Aditya Sharma"
description: "A row of plain titles, and behind them one big picture that changes as the visitor moves from title to title. It is a simple effect that makes a services..."
image: https://theplusaddons.com/wp-content/uploads/2024/05/How-to-Change-Background-Image-on-Hover-in-Elementor_-1024x536.jpg
word_count: 1050
---

# How to Change Background Image on Hover in Elementor?

## 

- Animated Service Boxes uses the Hover Section layout to place one title and one Featured Image per item, then shows the hovered title’s image behind the whole block.
- The Plus Addons for Elementor Pro ships Animated Service Boxes only in Pro, and the free plugin has no equivalent widget.
- Image Preload loads every item’s image up front, while the first item’s image appears on load and there is no separate setting for that opening picture.
- Hover Section overwrites the closest Elementor container’s background, so the widget needs its own container and any other widget in that same container sits on top of the changing image.

A row of plain titles, and behind them one big picture that changes as the visitor moves from title to title. It is a simple effect that makes a services or projects section feel alive.

The **Animated Service Boxes** widget does it with its **Hover Section** layout — each item supplies one title and one image, and the widget puts the image of whichever title is hovered behind the whole block.

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

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-animated-service-boxes/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

## Before You Start

- **Edition:** **Pro** — **Animated Service Boxes** ships only in The Plus Addons for Elementor Pro. With Pro deactivated the widget does not render at all, and the free plugin has no equivalent widget.- **Prerequisite:** [Elementor](https://wordpress.org/plugins/elementor/) (free) installed and active.- **Widget to enable:** go to **The Plus Addons > Widgets**, search for **Animated Service Boxes** and turn its toggle on.- **Prerequisite:** the images you want to show, already in the Media Library. Every item has its own **Featured Image**; with none set, Elementor's grey placeholder is used.- **Prerequisite:** put the widget in a **container of its own**. This layout writes the background image onto the container the widget sits in, so anything else in that container ends up on top of the changing image.- **Nothing else to switch on:** no extension and no site-wide setting is needed for this widget.

## Set up the hover section

- Edit the page with Elementor and add a **container that holds nothing else**. This layout paints the image onto that container, so keep it for the widget alone.- Drag the **Animated Service Boxes** widget into it and set **Main Style** to **Hover Section**.- Turn **Image Preload** on if you want the browser to fetch all the images before they are needed, so the first swap is not the one that loads slowly. It is off by default.- Turn **Image/Icon** on if each item should also show an icon, image or Lottie file next to its text.

- Open the **Animated Service Boxes** list. In each of the three items, set the **Title** — this is the part that is always visible — and the **Featured Image**, which is the picture that goes behind the section when that title is hovered.- Add a **Sub Title** and a **Description** for the detail that should appear only while the item is hovered.- Optional: turn **Button** on and fill in each item's **Button Text** and **Button Link**.- In **Content > Columns Manage**, set how many titles sit in a row on each device with **Desktop Column**, **Tablet Column** and **Mobile Column**.

![Hover Section: hovering the second title puts that item's image on the container behind](https://theplusaddons.com/wp-content/uploads/2026/09/animatedservice-result-hover-section.webp)

Use **Content > Layout** to set the section **Height** and the **Text Alignment** of the titles.

## Settings for this layout

| Setting | Where | What it does | Default |
| ------- | ----- | ------------ | ------- |
| **Image Preload** | Content > Animated Service Boxes | Loads every item's image up front instead of on first hover. | **Hide** |
| **Image/Icon** | Content > Animated Service Boxes | Master switch for each item's **Select Icon** field. | **Hide** |
| **Image Resolution** | Content > Animated Service Boxes | The image size each Featured Image is loaded at. | **Full** |
| **Button** / **Button Style** | Content > Animated Service Boxes | Adds a per-item button, in one of three designs. | **Hide** / **Style 1** |
| **Desktop Column** / **Tablet Column** / **Mobile Column** | Content > Columns Manage | Titles per row, per device. | **Column 4** / **Column 3** / **Column 2** |

## How It Behaves

- **The image really does change.** We watched the container behind the widget start on the first item's image, become the second item's after hovering the second title, and the third item's after hovering the third.- **The first item's image is the one you see on load.** There is no separate setting for it — reorder the items if you want a different opening picture.- **The hovered item's extra text fades in.** The Sub Title and Description of the hovered title went from invisible to fully visible while the other items kept only their titles.- **The swap is a crossfade on the container.** The widget also sets a half-second transition and a full-bleed overlay tint on that container, so the text stays readable over any picture.

## Limitations

- **Hover Section changes the container's background, not the widget's.** The image is written onto the closest Elementor container or section, so a background you set on that container is overwritten while the widget is on screen, and any other widget in the same container sits on top of the changing image.- **Hover Section has no Style control.** There is one design, so do not look for a **Style 1** / **Style 2** picker.- **Image Preload changes nothing you can see.** Turning it on added the images to the page early; the layout, the overlay and the swap looked identical either way. Use it for the first-hover delay on slow connections, not for a visual difference.- **Hover is a pointer thing.** On a touch screen there is nothing to hover, so plan for the first item's image to be the one most visitors on phones will see.

## Not verified

So you know exactly what has and has not been checked:

- **Select Icon.** Icon, Image and Lottie were not rendered with a real icon font or Lottie file, so nothing is claimed here about how they look.- **Image Resolution.** Only the default **Full** was used; no other size was measured.- **Button Style 2 and Style 3.** Only the default **Style 1** button was rendered.- **The Style tab.** No styling control was exercised, so this doc names the sections that exist and does not describe what each one does.- **Responsive behaviour.** Nothing was measured at tablet or mobile width for this layout; every measurement here is from a 1200 px viewport.

## Troubleshooting

### The background I set on the container disappeared

That is this layout. The widget writes its own image onto the container it sits in, overwriting whatever background that container had. Give the widget its own container.

### Another widget in the same container looks wrong

Same cause — it is sitting on top of the changing image. Move it into a container of its own.

### No image shows at all

Check that each item has a **Featured Image**. With none set, Elementor's grey placeholder is used and the effect looks broken.

### The first swap stutters

Turn **Image Preload** on so the browser fetches every image before the first hover, and keep the images to a sensible file size.

## Related Docs

- [Animated Service Boxes Widget: Settings Overview](https://theplusaddons.com/docs/animated-service-boxes-widget-settings-overview/)- [How to Create a Unique Portfolio Section in Elementor?](https://theplusaddons.com/docs/create-a-unique-portfolio-section-in-elementor/)- [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 do I need before using the hover background image effect in Elementor?**
A: The setup depends on a few specific pieces being in place: Elementor free must be installed and active, and The Plus Addons for Elementor Pro has to be installed and activated because this widget ships only in Pro. Each item also needs its own Featured Image in the Media Library, and the widget should live in a container by itself so its background image does not get overwritten by other content. That single-container rule is the big gotcha here.

**Q: Why does the background image on my container disappear when I add this widget?**
A: That happens because Hover Section writes its own image onto the container it sits in, overwriting any background already set there. The layout is designed to paint the changing image behind the whole block, so the fix is structural, not visual: give the widget its own container. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that container-level background behavior for the effect.

**Q: How do I stop another widget in the same container from looking wrong?**
A: Put that other widget somewhere else. Hover Section places the changing image behind the entire container, so anything else inside that same container sits on top of the image and can look off. This is why the tutorial says to keep the Animated Service Boxes widget alone in its own container. That separation keeps the hover image readable and avoids layout conflicts.

**Q: Why is no image showing when I hover a title?**
A: The usual cause is missing Featured Images on the items. Each item needs its own Featured Image, and if none is set Elementor falls back to a grey placeholder, which makes the effect look broken instead of intentional. The page also notes that every item should already have its images in the Media Library before you build the section.

**Q: How can I reduce stutter on the first hover swap?**
A: Image Preload is there for that exact problem. When it is turned on, the browser fetches all item images before they are needed, so the first swap does not pay the loading cost on hover. The page also says to keep file sizes sensible, because preload helps with timing but cannot fix heavy images by itself.

**Q: What is the best way to use this layout on mobile or touch screens?**
A: Treat mobile as a no-hover environment. The page says hover is a pointer thing, so on touch screens there is nothing to hover and most visitors will see the first item's image by default. Reordering items matters here because the first item's image is what appears on load, which makes it your practical fallback view for phones.