Image Hover Effects

An image that reveals a title and caption on hover turns a flat gallery into something people want to touch. The Image Hover Effects widget in Master Addons for Elementor wraps any image in a CSS hover animation, so a heading, a description, and a link slide, fade, or zoom into view when the cursor lands on it.

This page is the settings reference. For live demos of the effects and what is free or Pro, see the Elementor image hover effects widget page.

You pick one of the named effects, drop in an image, add the overlay text, then style the colors and filters. No custom CSS needed. This guide covers every setting in the widget.

What the Image Hover Effects widget does #

The widget takes one image and drops an animated overlay on top. Hover over it and it can reveal a title, a description, and a button or link, with the motion coming from a preset effect. There are 30 named effects. Eight are free (Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey and Oscar) and 22 more come with Master Addons Pro.

Three tabs run it. Content holds the effect, the image, and the overlay text. Style handles image opacity, filters, borders, and the title and description colors. Advanced is the usual Elementor spacing and visibility.

Before you start #

• WordPress with Elementor installed and active.
• Master Addons for Elementor installed and active. New to the plugin? See the installation guide.
• An image, plus the title and caption text you want to show on hover.

How to add the Image Hover Effects widget #

In the Elementor editor, open the Elements panel and search for Image Hover Effects, or scroll to the Master Addons section (the widgets carry a purple MA badge). Drag it onto the page and it loads with a sample image and overlay you can edit.

Choose the effect and image #

Open the Content tab. The Effects & Image section is where you set the hover animation and load the picture.

• Hover Effect: the named animation used on hover (more on this next).
• Upload Image: pick the image from the media library.
• Image Size and Image Resolution: the crop and the resolution served.
• Links or Popup?: make the whole image a link, or open a popup (popup content needs Pro).

Pick a hover effect #

The Hover Effect dropdown lists 30 named CSS effects. The first eight are free and the rest are marked Pro. Each one animates the image and the overlay text differently, from a soft fade to a caption that slides in.

• Sadie, Lily, Layla: fade the title and caption in over a darkened image.
• Roxy, Bubba, Romeo: slide a border or panel in with the text.
• Honey, Oscar, Marley (Pro): reveal an underline or a moving caption.
• Zoom and blur variants: scale or soften the image behind the text.

Select the image #

Click Upload Image to open the media library, then pick or upload your picture. Whatever effect you chose runs on top of this image.

Add the heading #

Open the Heading section for the title that shows on hover. Type the text and set the HTML tag so it reads correctly for SEO.

• Title: the heading text. If your site uses Elementor AI, Elementor’s own Write with AI link also shows up here.
• HTML Tag: the heading level, H1 to H6.

Add the description and link #

Open the Description section to add the caption that shows under the title on hover. Back in Effects & Image, if you set Links or Popup? to Popup, the Content Type and Content fields decide what the popup shows. Popup content needs Pro.

• Content Type: what the popup shows: an image, text, a saved section, a saved widget or a saved page template (Pro).
• Content: the popup text, edited in a full WYSIWYG box.
• Links or Popup?: point the image at a URL or open it in a popup.

Style the image and overlay #

Open the Style tab. The Image section controls how the picture looks before and during the hover, and that is where a lot of the effect actually comes from.

• Image Opacity and Hover Opacity: how visible the image is at rest and on hover.
• Image Filter and Hover Image Filter: blur, brightness, and contrast for each state.
• Border, Border Radius (Pro), Box Shadow: the frame around the image.

Under the Image section, separate Title and Description sections handle the color and typography of the overlay text.

Common use cases #

• Portfolios revealing a project name and link on hover.
• Team grids showing a name and role over each photo.
• Service tiles with a title and short caption per image.
• Blog thumbnails that surface the post title on hover.
• Product galleries pairing an image with a name and a button.

Tips for working with the Image Hover Effects widget #

• Use clear images. The overlay darkens the picture, so a busy shot can make the text hard to read. A calmer image with room in the middle works best.
• Keep the caption short. One line under the title reads better than a paragraph crammed into the overlay.
• Match the effect to the content. Subtle fades suit a portfolio; bold slides suit a promo.
• Set the right heading tag. Use H2 or H3 for gallery titles, not H1, unless it is the page’s main heading.
• Test on mobile. There is no hover on touch, so check the overlay still makes sense when someone taps instead.

Watch the video tutorial #

Prefer to follow along on screen? The video tutorial below walks through the Image Hover Effects element from start to finish, showing how the effects, overlay text, and styling work in the Elementor editor.

Frequently Asked Questions #

Wrapping up #

The Image Hover Effects widget turns a static image into an interactive one: pick an effect, load the image, add a title and caption, then style the opacity, filters, and text. For related widgets, see the Info Box widget and the Flipbox widget, browse the full Master Addons widgets and extensions, and check the pricing page for what each plan includes.