How to add hover effects to images in Elementor

Open the page in the Elementor editor and drag an Image widget into the layout. Choose an image from the Media Library, set its size and alignment, and add useful alt text before styling it.

If the image should open another page, set its link now. This makes the hover effect decorative rather than the only way visitors can understand or use the image.

Select the image, open the Style tab, and expand Image. In the Hover state, set a transition duration and choose an effect from the Hover Animation menu. You can also adjust hover opacity and CSS filters such as blur, brightness, contrast or saturation.

This is the best manual route for simple effects such as grow, shrink, fade or a colour change. Save or update the page, then check the effect on the published page rather than relying only on the editor preview.

For a controlled zoom, select the Image widget and open Advanced followed by Custom CSS. Elementor Pro supports this field; Elementor Free does not include the editor’s Custom CSS panel, so place equivalent CSS in your theme or site stylesheet instead.

Use this CSS on the Image widget:

selector { overflow: hidden; }
selector img { transition: transform.3s ease; }
selector:hover img { transform: scale(1.06); }

The selector keyword targets the widget wrapper, while adding img targets the image inside it. The wrapper’s overflow: hidden stops the enlarged image from spilling into nearby columns.

If your Elementor version exposes Advanced > Transform, use its Normal and Hover states to set scale, rotation, offset or skew without writing the transform rule yourself. Add a duration so the change does not snap or jitter. Elementor’s transform controls apply to widgets, including image widgets, rather than sections or columns.

Keep the values restrained. A small scale increase usually looks better than a large zoom, especially in a grid where neighbouring cards must remain aligned.

Hover is a pointer interaction, so phones and tablets may not show it in the same way as a desktop browser. Make sure the normal image state still looks clear, and do not hide an important label, price or call to action only until hover.

Check keyboard focus if the image is linked, confirm that captions remain readable, and test the effect at each responsive breakpoint. If the image appears cropped, review its object-fit or image-size settings before increasing the hover scale.

For the fast route, install and activate Emage, then use its Elementor controls to choose an image hover effect instead of building each animation with widget settings and CSS. It provides more than 30 customisable effects, with controls for colours, animation timing and responsive presentation.

This is useful for image grids, galleries, background images or WooCommerce product visuals when the built-in Image widget options are too limited. Keep only the effects you need, because excessive animation can distract visitors and make a page feel busy.