Mouseover effects on background images

A subtle zoom or pan on a background image when the user hovers over a card or hero section adds depth and interactivity without distracting from the content. This article covers two popular techniques: the Ken Burns slow-pan effect and the direct zoom-in effect.

Why background images need a special approach

CSS transitions animate from one value to another. Background images set on a container with background-size can be transitioned, but transforming the background position or size directly is less smooth than using transform on a real element. The cleanest techniques use either:

• A child element with overflow: hidden on the parent, so the child can be scaled without expanding the container.
• A ::before pseudo-element as the background layer, so it can be transformed independently of the container’s content.

Technique 1: Ken Burns effect (slow pan and zoom)

The Ken Burns effect is a slow, continuous zoom combined with a gentle pan. Applied on hover, it gives a sense of depth and life to static photography.

Setup in Site Designer:

1. Set the background image on the container

   Select your container (a card, section, or div). In the Style pane, set a background image, background-size: cover, and background-position: center.

2. Add a transition for background-size

   In the Effects pane, add a Transition: Property background-size, Duration 0.6s, Timing ease-in-out.

3. Enter :hover mode and change background-size

   Switch to :hover in the pseudo-class selector. Change background-size from 100% to 110%. Exit hover mode.

On hover, the background image smoothly zooms in by 10%. Adding a slight background-position change from center center to 55% 55% on hover creates the pan component of the Ken Burns effect.

Technique 2: Zoom-in using overflow: hidden

For more dramatic zoom effects — especially on image elements rather than background images — the overflow: hidden + transform: scale technique is more reliable and GPU-accelerated.

1. Create a container with overflow: hidden

   Add a div around your image. Set the container to overflow: hidden. This ensures the image doesn’t visually burst outside its boundaries when scaled.

2. Add a transition to the image

   Select the inner image. In the Effects pane, add a Transition: Property transform, Duration 0.4s, Timing ease.

3. Apply transform: scale on the container's hover

   Enter :hover mode on the container (not the image). In the Effects pane, add a Transform: Scale set to 1.05. This scales the image slightly as the user hovers the card.

Technique 3: Pseudo-element background layer

For the most flexible approach — especially when you want to zoom a background image without affecting text content layered on top — use a ::before pseudo-element as the background layer.

In Site Designer, you can target ::before via the pseudo-class/pseudo-element selector. Add the background image to ::before with position: absolute; inset: 0; z-index: 0, then add a transition on transform: scale(1.08) on the parent’s hover state. The parent needs position: relative; overflow: hidden.

Performance note

All three techniques rely on transform or transitions that the browser can GPU-accelerate. Avoid transitioning background-position directly on high-resolution images in performance-critical contexts — it can cause paint-layer issues. The overflow: hidden + transform: scale technique is the safest for most use cases.