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

Adding text over an image in Elementor sounds like a two-minute job. Then you try it with the default widgets and end up wrestling with negative margins, absolute positioning, and a Heading widget stacked on a background image that breaks on mobile. There is a faster way. The free Image Hover Effects widget from Master Addons puts a heading and description on top of any image and reveals them with one of 25+ hover animations. You never touch CSS.

In this tutorial you will set up an Elementor text over image section from scratch: upload the image, pick a hover effect from a dropdown, style the overlay, and decide what happens when someone clicks. Every screenshot below comes straight from the Elementor editor, so you can follow along click by click.

Why Text Over Image Needs a Widget (Not a CSS Hack)

Elementor’s own documentation suggests two workarounds for text over image: set the image as a section background and drop a Heading widget inside, or push a heading upward with negative margins. Both work for a static caption. Neither gives you a hover reveal, an animated overlay, or a click action, and the negative-margin trick tends to fall apart at tablet and mobile breakpoints.

A dedicated widget solves all of that in one place:

• Hover reveal built in. The image stays clean until the visitor hovers, then the title and description animate in.
• One settings panel. Image, text, overlay color, and typography live in a single widget instead of three stacked ones.
• Responsive by default. The overlay scales with the image, so nothing shifts out of place on smaller screens.
• Click actions. The whole image can open a link or a popup. Portfolio grids and service cards depend on this.

This is why text-over-image layouts show up everywhere: portfolio tiles that reveal the project name, team cards that show a bio on hover, blog category banners, and gallery grids where captions would otherwise clutter the design.

The Image Hover Effects Widget at a Glance

Image Hover Effects ships in the free version of Master Addons, a library of 76+ widgets and extensions running on 30,000+ active WordPress sites. Here is what you get in this one widget:

• 25+ named hover effects (Sadie, Chico, Marley, Ruby, and friends), each a different reveal animation
• A heading field with a selectable HTML tag (H1 to H6), so your overlay text can stay SEO-correct
• A description field for a short supporting line
• Overlay background color, image opacity, and hover opacity controls
• Border radius, padding, box shadow, and separate typography for title and description
• Three click behaviors: nothing, open a popup, or follow a link

All of it works without a Pro license. If you want the full settings reference, the Image Hover Effects documentation covers every control.

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

Step 1: Install Master Addons

In your WordPress dashboard, go to Plugins > Add New and search for “Master Addons”. Install and activate the free plugin from WordPress.org. If anything trips you up, the installation guide walks through it. You need Elementor active too, but the free version is enough.

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

Open any page with Elementor and search for “Image Hover Effects” in the widget panel. You will spot it among the other MA-badged widgets like Advanced Image, Image Hotspot, and Image Comparison. Drag it into your section.

Step 3: Upload Your Image

The Content tab opens with the Effects & Image section. Click Upload Image and pick something from your media library. Two settings sit right below it:

• Image Size controls the rendered dimensions. Default works for most layouts.
• Image Resolution picks which WordPress-generated size loads. “Full” gives the sharpest result. On a page with eight or ten of these tiles, drop to “Large” instead; nobody sees the difference at grid size and the page loads noticeably faster.

Step 4: Pick a Hover Effect

Here is the fun part. Open the Hover Effect dropdown and you get the full list of named effects: Lily, Sadie, Roxy, Bubba, Romeo, Layla, Honey, Oscar, Marley, Ruby, Milo, Dexter, Sarah, Zoe, Chico, Julia, Goliath, Hera, Winston, Selena, Terry, Phoebe, Apollo, Kira, Steve, Moses, Jazz, Ming, Lexi, and Duke.

Each name is a different combination of overlay animation and text reveal. Sadie slides a gradient up from the bottom. Marley drops the title in with an underline. Chico zooms the image out slightly and frames the text with a thin border. The editor preview updates live, so click through a few and hover over the image to test. Here is Chico mid-hover:

A quick grouping to save you clicking through all of them:

• Subtle fades: Lily, Sadie, Layla, Zoe. Good default choices for portfolios.
• Directional slides: Honey, Oscar, Romeo, Sarah. Text pushes in from an edge.
• Zoom and scale: Chico, Bubba, Milo, Julia. The image moves, which draws the eye.
• Playful and bold: Marley, Ruby, Dexter, Goliath, Apollo. Stronger motion, best for creative sites.

Step 5: Add Your Heading

Open the Heading section. Type your title and pick an HTML Tag. This matters more than it looks: if the image sits in a grid of services, H3 usually fits your page hierarchy better than the default H2. Search engines read this tag like any other heading on the page.

Step 6: Write the Description

The Description section adds the smaller line that appears under the title on hover. Keep it to one or two short sentences. Long paragraphs get cut off on smaller images and defeat the point of a clean overlay.

Styling the Overlay: Color, Opacity, and Shape

Switch to the Style tab. The Image panel controls how the overlay looks:

• Background Color tints the overlay that appears on hover. Pick a color from your brand palette; a HEXA value like #DD5555 with reduced alpha keeps the photo visible underneath.
• Image Opacity sets the resting state, and Hover Opacity sets how much the image dims when the overlay appears. A gap between the two (say 0.5 resting, 0.7 on hover) makes the reveal feel deliberate.
• Image Filter and Hover Image Filter add CSS filters like grayscale or blur for before/after moods.

Below that, Border Radius reshapes the whole block. Matching values give you soft rounded corners; asymmetric values (100 top-left, 0 top-right, 100 bottom-right, 0 bottom-left) create the leaf shape you see on a lot of modern agency sites.

Typography for the Title and Description

Still in the Style tab, the Title and Description panels each get their own color, typography, and spacing controls. Font family, size, weight, transform, line height, and letter spacing are all here, plus a text shadow option for the description. If your image is light, switch the title color to a dark value so the text stays readable in both states.

One readability rule worth keeping: aim for clear contrast between text and whatever sits behind it. If the photo is busy, lean on the overlay color and opacity from the previous step rather than fighting it with font weight alone.

Click Actions: Open a Popup or Link the Whole Image

Back in the Content tab, the Links or Popup? control decides what a click does. Three options sit behind the small icon toggle: none, popup, and external link.

Popup opens an overlay window with whatever content you choose. Pick a Content Type and either write content directly in the WYSIWYG editor or load a saved Elementor template. Portfolio grids use this constantly: each tile opens a case study without leaving the page.

Link turns the entire image into a clickable card. Paste the URL into the Link URL field and the whole hover area points there, which beats a tiny text link for tap targets on mobile.

If you want more popup patterns beyond this widget (exit intent, scroll triggers, timed popups), see how to add a popup in Elementor for free.

The Finished Result

Hit preview and hover over your image. The overlay fades in, the title and description reveal with the effect you picked, and the cursor signals the click action:

Total build time is about five minutes. And since every choice lives in the widget settings, you can swap the effect or recolor the overlay next month without rebuilding anything.

Design Tips That Keep Text Over Image Readable

• One effect per grid. If you build a 6-tile portfolio, give every tile the same hover effect. Mixed effects read as accidental.
• Contrast first. White text needs a dark overlay; dark text needs a light image or a light overlay tint.
• Short descriptions. Ten words or fewer. The overlay is a teaser, not a paragraph.
• Test on touch. On phones the first tap reveals the overlay and the second tap fires the click action, so make sure the revealed state looks complete on a small screen.
• Match your border radius to the rest of the page. A 100px leaf shape next to sharp-cornered cards looks off.

For broader motion design guidance, our guide to Elementor animation effects covers when hover, scroll, and entrance animations each earn their place, and the Master Addons animation features page shows what else the plugin can animate.

Other Master Addons Widgets for Image Effects

Image Hover Effects is the right tool for text reveals, but a few sibling widgets cover the neighboring use cases:

• Advanced Image adds 3D tilt, ribbons, and badges to a single image without overlay text.
• The Flipbox widget flips a card to a fully designed back side, better when you need buttons or icons in the revealed state.
• Image Hotspot pins interactive tooltip markers to specific points on one image, ideal for product callouts.
• The Image Carousel handles multi-image sliders when one hover tile is not enough.
• Image Comparison puts a draggable before/after slider on two versions of a shot.

Free vs Pro: What Do You Actually Need?

For text over image, nothing beyond the free plugin. All 25+ hover effects, the heading and description fields, overlay styling, popups, and links ship free. Master Addons Pro adds the wider premium widget set, template kits, and extras like the Widget Builder, so it is worth a look once you are building whole sites rather than one section. There is a 14-day money-back guarantee if you try it and change your mind.

Frequently Asked Questions

Wrapping Up

An Elementor text over image section takes five minutes with the right widget: drop in Image Hover Effects, upload your photo, pick an effect by name, and style the overlay to match your brand. Positioning and responsive behavior are already handled for you, and the free version covers everything in this guide.

Grab the free plugin, browse the rest of the widget and extension library, and if you get stuck the widget documentation has every setting mapped out.

Related reading: Elementor animation effects, the Elementor Flipbox widget, and adding popups in Elementor for free.