A section that changes as the visitor moves across it turns a list of services into something worth exploring.
Hover Section holds one large background and swaps it for whichever item the pointer is over.
For every Animated Service Boxes setting in one place, see the Animated Service Boxes block guide.
Before You Start
- Edition: Pro — the Animated Service Boxes block is part of Nexter Blocks Pro.
- Block to enable: Animated Service Boxes, switched on under Nexter > Blocks in your WordPress dashboard.
- Your items decided: each one takes a title, a subtitle, a description, an icon or image and a link.
- One large image per item, all the same shape.
Steps
- Add the Animated Service Boxes block and click Design from Scratch.
- Set Main Style to Hover Section.
- Fill in your items — title, subtitle, description, and an image or icon for each.
- Pick the Style for the hover section.
- Set the overlay colour so the item titles stay readable over every image.
- Publish and move across the items.
How It Behaves
- Images are loaded only when needed. Measured: no image request at all on load — each item’s picture sits in a
data-imageattribute until it is wanted. - One item is active from the start, so the section is never blank before the visitor moves.
- The overlay colour rides on the item as
data-hsboc, defaulting to a 30 per cent black wash. - Image Preload loads them up front instead, which trades a slower first paint for a swap with no delay.
Limitations
- Pro only.
- The images are CSS backgrounds, not
<img>tags. They carry no alt text and are not indexed as images, so keep them decorative rather than informative. - Without preloading, the first hover on each item can show a moment of blank while the image arrives.
- There is no hover on a touch screen, so check how this looks on a phone before relying on it.
Troubleshooting
The background does not change
The swap is on hover, so there is nothing to trigger it on a touch screen.
The first hover is slow or blank
Switch Image Preload on. The images are loaded on demand otherwise.
The titles are hard to read over some images
Darken the overlay colour on the items.
