How to Add an Image Zoom Hover Effect in WordPress

Before you start

The downloadable example contains an original geometric SVG embedded as an image data URL. Replace it with your own WordPress Media Library image before publishing, using a meaningful alternative description. This effect needs HTML and CSS only. If you already have an Image block, you can often adapt its class instead of adding a second copy of the picture. See how to set WordPress block classes first.

How the zoom works

The .iljs-zoom-frame wrapper clips anything outside its rounded boundary. The image remains a normal block element with width: 100% and height: auto, so it keeps its aspect ratio as the available width changes. Hovering scales that image with a transform. A transform changes its painted size without asking surrounding text to reflow.

The default --iljs-scale is 1.08, or an eight-percent enlargement. That is enough to create a visible change without cropping away most of the subject. The half-second transition softens the movement. The @media (hover: hover) rule limits the effect to devices that report hover support, avoiding a sticky hover state as a primary interaction on many touch devices.

The reduced-motion rule removes the transition and suppresses the scale change. The image itself remains visible. No JavaScript observes the pointer, resizes the photo, or repeatedly calculates coordinates. If you want actual image comparison rather than decoration, use the before-and-after slider instead.

Install a new image frame

1. Upload your image to the Media Library and note its URL, width, and height. Choose an appropriately sized file, rather than a huge camera original for a small card.
2. Insert a Custom HTML block in a draft page. Paste the HTML fragment, then replace src with your media URL.
3. Replace alt with a useful description of your image. If the image is purely decorative and its meaning is already present in nearby text, use an empty alternative rather than unrelated keywords.
4. Update the width and height attributes to match the source image’s ratio. Install the scoped CSS through the WordPress custom CSS guide.
5. Preview the published layout. Hover the image with a mouse and check that its edge stays inside the frame. Check the same image on a narrow touch layout.

Block and classic themes can use the page-level fragment when the markup is permitted. Elementor can use an HTML widget or adapt its image widget wrapper with equivalent scoped selectors. Restricted roles may remove inline styles in a combined block; the separate HTML and approved stylesheet route avoids assuming every account accepts an embedded style element.

Adapt an existing Image block

Select the Image block and open its Advanced settings. Add iljs-zoom to Additional CSS Class(es), without a leading dot. The actual front-end markup may differ from the snippet, so inspect whether the class appears on the figure or a wrapper. Add an overflow-hidden clipping rule to the appropriate figure or wrapper and target its descendant image.

Do not paste a global img:hover rule. That would animate logos, icons, gallery images, and unrelated content across the site. If your theme already uses a transform on the image, this effect may overwrite it; combine the transformations deliberately or target a wrapper instead. An existing image that links elsewhere should keep its link semantics and visible keyboard focus.

The markup approach shown above is more predictable because it includes the explicit .iljs-zoom-frame wrapper. It also keeps the caption outside the clipped region. If you modify a native block, keep WordPress’s caption and responsive image behavior rather than rebuilding them unnecessarily.

Customize the look

Increase --iljs-scale modestly for tighter cropping, or reduce it toward 1.03 for a quieter change. Change --iljs-radius to control the frame corners. Adjust the figure’s max-width: 460px to fit your layout. The image should still use width: 100% so it can shrink below that maximum.

For images with a face or text near an edge, test the crop carefully. You may need a smaller scale, a different crop, or an object-position adjustment if you also introduce a fixed-height image frame. This original example intentionally avoids a fixed image height, reducing that extra complexity.

A click-through image should point to a real destination. A nearby gradient call-to-action button may communicate the next step more clearly than making every decorative picture a link.

Troubleshoot the effect

The picture grows outside its card. The image needs an ancestor with overflow: hidden. Confirm that .iljs-zoom-frame survived the copy and that your custom block selector points to the clipping wrapper.

Nothing happens on my phone. That is expected for a decorative hover effect. Touch devices should receive the normal image. Do not put essential information in a hover-only caption or control.

The image looks blurry during zoom. Its source may be too small for the displayed size and scale. Use a suitable responsive image variant, but balance sharpness against download size. Scaling cannot create detail that is absent from the source.

Other pictures also animate. Your adaptation probably uses an overly broad selector. Restrict the rule to the unique class you assigned to this block. Our code installation guide explains keeping snippet styles separate from site-wide theme rules.

Accessibility and performance

The effect does not require focusable markup unless the image is already a link. Do not add tabindex to every decorative image merely to trigger an animation. Preserve useful alternative text and captions. Reduced-motion visitors receive the still image, and hover-limited devices keep all content visible.

Transforms often avoid layout work, but a large source image still costs network bandwidth and decoding time. Include dimensions to reserve layout space. Use WordPress’s generated responsive image markup when practical, and lazy-load images below the initial viewport. Do not lazy-load the main above-the-fold picture merely because it has an effect.

Frequently asked questions

Is JavaScript needed?

No. The wrapper, transform, and media queries provide the entire interaction. There is no JavaScript tab because no script is required.

Can it zoom on keyboard focus?

If the image is a meaningful link, you can apply the same transform when that link receives :focus-visible. Keep an obvious focus outline on the link and retain reduced-motion behavior. A noninteractive image does not need to become a keyboard stop.

Can I use it inside a gallery?

Yes, by assigning a scoped wrapper to each intended item. Test that the gallery’s existing lightbox or transforms still work. Do not overwrite its controls with a global image rule.

Check your installation

The image should enlarge inside its frame, the caption should remain still, and touch visitors should lose no information. Compare the original standalone file with your WordPress version if the theme’s markup changes the result.