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.
Requirement – This block is a part of the Nexter Blocks, make sure it’s installed & activated to enjoy all its powers.
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.
