Elementor Text Over Image: 25+ Hover Effects (Free Widget Tutorial)

Adding Elementor text over image looks easy until you try it with the default widgets. You end up fighting z-index and absolute positioning just to get a headline to fade in on hover, then writing your own CSS transitions to keep it smooth. The Master Addons Image Hover Effects widget replaces all of that with a dropdown.

Pick an image, fill in a heading and a short description, pick one of 25+ hover animations. Done. The widget handles the overlay layer, animation timing, readable text background, and responsive behavior. You can also turn the hover into a click trigger for a popup, a saved Elementor section, or any external link.

Below, a full walkthrough of every setting: how to add text on top of an image in Elementor, which effect fits which content type, how to open popups from the hover, and how to style the whole thing without touching CSS.

What “Text Over Image” Means in Elementor

A text-over-image layout is an image with a caption or short heading rendered on top of it. The text either sits permanently on the image (a static overlay) or appears only when the visitor hovers (a hover overlay). Most modern sites use the hover version because it keeps the image clean until the visitor shows interest.

Elementor’s default Image widget does not have a built-in text overlay. You can fake it by stacking an Image widget and a Heading widget inside a container, but you lose the animation, and positioning breaks on mobile. The Image Hover Effects widget from Master Addons does the job properly. One widget, one image, one heading, one animation dropdown.

Why Use Text-Over-Image Overlays?

Overlays solve a specific visual problem. You have an image that tells part of the story and text that tells the rest. Putting them in separate blocks doubles the scroll height and breaks the connection between them. Putting the text on the image keeps them joined.

Places a hover overlay works better than a plain image:

• Portfolio grids. The image shows the work. The hover shows the client name and project type.
• Team member cards. Photo on top, role and LinkedIn link on hover.
• Blog category tiles. Category image with the category name and post count on hover.
• Service cards. Icon or illustration with a short service description that slides in.
• Image galleries with captions. A gallery that stays clean until the visitor wants details.

The Image Hover Effects Widget (25+ Effects)

The widget is in the free Master Addons plugin. Drag it in, point it at an image, fill in a heading and a description, and pick an effect. What it includes:

• 25+ hover animations grouped into fade, slide, zoom, rotate, and frame-based transitions.
• Heading + description fields that sit on top of the image, styled independently.
• Click behavior on the whole card: do nothing, open a popup, or follow an external link.
• Popup content types that include saved Elementor sections, page templates, widgets, or raw HTML.
• Per-image border radius, so you can round the corners without wrapping the widget in another container.
• Social icon row inside the overlay, with custom colors per icon and hover states.

All 25+ effects are available in the free version. No feature is gated behind a Pro license.

How to Add Text Over an Image in Elementor (Step-by-Step)

Full setup. This assumes Elementor is installed. If not, install the free version from the WordPress plugin directory first.

Step 1: Install Master Addons for Elementor

In WordPress admin, go to Plugins → Add New, search for “Master Addons for Elementor,” then install and activate. The installation doc covers the edge cases.

Step 2: Drag the Image Hover Effects Widget Into Your Page

Open the page in Elementor. In the widget panel, search for “Image Hover Effects.” It shows up with the Master Addons badge. Drag it into a column.

Step 3: Upload Your Image and Fill In the Text

In the Content tab, upload or pick an image from the WordPress media library. Add your heading text (keep it to 5–7 words) and a short description (one or two sentences, 15 words max on a mobile-first layout). Both fields support standard rich text, so you can bold a word or drop in a link if needed.

Step 4: Pick a Hover Effect

Open the Effects dropdown. You get 25+ options. Default to something subtle (Fade In, Slide Up) unless the image is the main event on the page, in which case go bolder (Zoom Out, Rotate, Frame Slide). More on picking the right one in the effects reference below.

Step 5: Set the Click Behavior

Scroll to the Click Action section. Three options:

• None. The hover effect runs, but the card is not clickable. Use this for decorative overlays.
• Popup. The whole image becomes a popup trigger. You can load a saved Elementor section, a page template, or custom content into the popup. Good for “click to read more” flows.
• External Link. The card becomes a link. Set the URL, nofollow, and new-tab options.

The 25+ Hover Effects Explained (Quick Reference)

The 25+ effects fall into five practical groups. Use this as a picker guide when you are staring at the dropdown and cannot decide.

Fade Effects (subtle, safe)

Fade In, Fade In Up, Fade In Down, Fade In Left, Fade In Right. The overlay fades from transparent to opaque, optionally sliding in a few pixels. Safe default for portfolio grids and content-heavy pages where you do not want the hover to pull attention.

Slide Effects (directional, punchy)

Slide Up, Slide Down, Slide Left, Slide Right, Slide Diagonal. The overlay slides in from one side. Matches well with tile grids where the slide direction cues which tile the visitor is on.

Zoom Effects (focus-grabbing)

Zoom In, Zoom Out, Zoom Rotate. The image scales while the overlay appears. Works on hero-sized images where you want the hover to feel like a camera zoom.

Rotate & Flip Effects (playful)

Rotate Up, Rotate Left, Flip Horizontal, Flip Vertical. The image rotates or flips as the overlay appears. Keep these for creative portfolios and landing pages. They are too loud for a services grid.

Frame & Overlay Effects (designy)

Frame Slide, Curtain, Border Reveal, Mask Slide, Blind. The overlay comes with a decorative frame or mask. These give the whole grid a magazine-spread feel but slow down older mobile devices if you run six or eight of them at once.

Pick-one rule: Use the same effect across every image in a grid. Mixing Fade In and Zoom Rotate in the same row looks like a bug, not a design choice. Consistency matters more than picking the “best” effect. For broader hover animation patterns, see our Elementor animation effects guide.

Styling the Image, Text & Social Icons

Switch to the Style tab. The panels mirror the content sections: Image, Content (heading + description), and Social Icons.

Image Panel

Background color (the tint that appears behind or over the image on hover), opacity, CSS filters (blur, grayscale, brightness), borders, and box shadow. Opacity is where most of your readability work happens. A 60% dark overlay makes light text readable on almost any photo.

Content Panel

Separate typography for the heading and description, text color, alignment, and padding. Use a sans-serif for the heading and keep the description at 14–15px so it does not dominate the image. Skip centered text unless the overlay is short. Left-aligned reads easier at small sizes.

Social Icons Panel

Color per icon (not per set), hover state color, icon size, and spacing. Useful for team member overlays where each person links to their LinkedIn, Twitter, or portfolio. The Master Addons Icon Library has 8 premium icon sets you can use here.

Popup on Hover: Open Sections or Templates on Click

This is the feature most people miss. When you set Click Action to Popup, the widget shows a modal on click and can load any saved Elementor section into it. Build the popup content once in Elementor’s template manager and reuse it across every image hover card.

Content types that load into the popup:

• Saved Elementor Section. Build any layout as a saved template, then pick it here. The layout, typography, and styles all come from the saved section.
• Page Template. Load a full page template. Good for “view case study” popups with hero image, text, and CTA.
• Any Widget. Single-widget popups (video, form, gallery).
• Custom HTML / Content. For quick copy-paste popups without building a saved section.

This is why the widget gets picked so often for portfolio grids. Every portfolio tile shows the project name on hover, then opens a full case-study layout on click, without a separate page per project.

Design Tips That Keep It Readable

Overlays look great in Figma and awful on real images if the readability is off. Rules that keep them legible:

• Dark overlay with light text (or the reverse). Never put medium grey text on a medium-brightness image. Contrast ratio under 4.5:1 fails WCAG and most people will not read it.
• Keep descriptions short. One sentence, 15 words. If you need more, the widget is probably the wrong choice and you want a proper card with the text below the image.
• Test on a mid-range phone. Hover does not exist on touch devices. The widget falls back to “tap to reveal”, which means the first tap shows the overlay and the second tap follows the click action. Make sure that two-step flow works before shipping.
• Match border radius to the rest of the site. If your cards are 8px radius, use 8px here too. Mixed radii look sloppy.
• Use the same effect across a grid. Mentioned above, but it is the single most common mistake people make with this widget.

Alternative: The Advanced Image Widget

If you want text over an image but also a 3D tilt effect on hover plus a corner ribbon badge (“New,” “Sale”), look at the Advanced Image widget instead. Same plugin, slightly different feature set:

• Image Hover Effects widget: 25+ animations, popups, and social icons. Best for portfolios and galleries.
• Advanced Image widget: 3D tilt on hover, ribbon badges, simple caption. Best for product cards and feature highlights.

For other interactive card ideas, the Elementor FlipBox widget covers two-sided cards with a flip animation, and the Image Hotspot widget handles interactive points on a single large image.

Free vs Pro: What You Get

The Image Hover Effects widget is fully in the free plugin. All 25+ effects, the popup, the social icons, and the border radius controls work without a Pro license. Pro unlocks other widgets in the pack, not this one.

If you only need text over an image, the free version is enough. For the full 76+ widget library, Theme Builder, Popup Builder, and Pro pricing, see the main plans. For a broader addon comparison, check our 100 best Elementor addons roundup.

Frequently Asked Questions

Wrapping Up

Adding Elementor text over image the hard way means custom CSS, absolute positioning, and the trial-and-error round of making it behave on mobile. The Image Hover Effects widget from Master Addons drops the whole thing down to five fields and a dropdown. Twenty-five-plus effects and built-in popups, all in the free plugin.

Once you have picked an effect and set the click action, the same widget handles portfolios, team grids, category tiles, and feature cards. For more interactive image widgets to pair with it, look at the Image Carousel widget and the Image Comparison slider.

Related reading: Elementor animation effects | Elementor FlipBox widget | Master Addons icon library