---
title: "How to Change Background Image on Hover in WordPress?"
url: https://nexterwp.com/docs/how-to-change-background-image-on-hover-in-wordpress/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to change the background image of a WordPress section on hover? This effect allows the background image to automatically change when a user hovers over a specific..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Change-Background-Image-on-Hover-in-WordPress_-1024x519.jpg
word_count: 442
---

# How to Change Background Image on Hover in WordPress?

## Key Takeaways

- Nexter Blocks allows users to change the background image on hover using the Animated Service Boxes block.
- The Image Preload toggle in Nexter Blocks enables smooth transitions between background images.
- Users can manage the number of items in a row for desktop, tablet, and mobile separately in Nexter Blocks.

Do you want to change the background image of a WordPress section on hover? This effect allows the background image to automatically change when a user hovers over a specific element, adding an interactive and engaging experience to your website, making it more dynamic for visitors.

With the Animated Service Boxes block from Nexter Blocks, you can easily change the section background image on hover.

*To check the complete feature overview documentation of the Nexter Blocks Animated Service Boxes block,* *[click here](https://nexterwp.com/docs/add-animated-service-boxes-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-animated-service-boxes/)

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

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

From the **Style** section, 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.

By enabling the **Display** **Button** toggle, you can add a button to the service boxes.

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

By enabling the **Icon/Image** toggle, you can add an icon or image to the service boxes.

2. In the **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 Display Button toggle is enabled to see the Button Text and Button Link fields.*

Following this process, you can edit the other items.

You can click on the **+Add Item** button to add more service boxes.

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

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.

## 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 correctly added the Animated Service Boxes block from Nexter Blocks. Check that the Hover Section is selected in the Main Style section and that you've uploaded images in the Featured Image section for each service box. If the Image Preload toggle is disabled, enabling it can help create a smoother transition.

**Q: Can I use the Animated Service Boxes block for other types of content?**
A: The Animated Service Boxes block is primarily designed for displaying service boxes with hover effects. However, you can customize the content within each box, including titles, icons, and descriptions. This flexibility allows you to create engaging sections for various purposes, such as showcasing team members or products.

**Q: What settings work best for a smooth background image transition?**
A: To achieve a smooth background image transition when using the Animated Service Boxes block, enable the Image Preload toggle. This preloads all background images, ensuring that they load quickly and transition seamlessly when a user hovers over the section. Additionally, consider using high-quality images that are optimized for web use to maintain performance.

**Q: Are there any limitations when using the Animated Service Boxes block?**
A: One limitation of the Animated Service Boxes block is that it requires the Nexter Blocks plugin to be installed and activated. Additionally, while it supports various customization options, it is primarily focused on hover effects and may not be suitable for all content types. Ensure that your design aligns with the intended use of this block.

**Q: Does the Animated Service Boxes block work with mobile devices?**
A: The Animated Service Boxes block is designed to be responsive and should work on mobile devices. However, keep in mind that hover effects may not translate the same way on touch screens. It's advisable to test the appearance and functionality on various devices to ensure a good user experience.