Halloween 40% off every Pro plan. Lifetime from $51, pay once.40% off Pro Vanishes in Claim40% off
Get Animation Addons Pro
Classic Elementor widget · Free

Image Widget for Elementor One picture, sized and styled exactly, with scroll effects in Pro

The Elementor image widget is a single image block. Upload an image, pick the resolution, add a link and set the width, height, fit, border, radius, shadow and hover filters in the panel. It is free. With Animation Addons Pro, the same image gets an Elementor image scroll animation: it can reveal, scale or stretch as visitors scroll.

Try it free See the live demos
  • Free picture widget
  • Size, fit and position
  • Hover opacity and filters
  • Reveal, scale, stretch with Pro

Classic widget · Elementor 3 and 4Updated

Live demos

Eight image designs, live

Eight ways to show one image, each on a small site. Scroll to play the effects, and use Replay to see a reveal again. The motion uses Animation Addons Pro.

HaldenProductTeamsPricing
A team around a desk with laptops and a large monitor
For hybrid teams

Plan the week where everyone can see it

Boards, notes and files in one place, for the days at the office and the days at home.

See how teams use Halden
Feature sections

Team photo that slides in

A rounded photo beside the text on a software site. When its top reaches the middle of the screen, the picture is uncovered from left to right while it settles from 130% to full size. This is an Elementor image reveal animation and needs Pro.

Scroll to it, or press Replay

Choose the image, then in Image Animation (Pro) pick Reveal from the right and set Animation Start to Top Center.

Northlight StudioWorkStudioContact
Case study

Pebble phone launch film

A phone mockup lying on black glossy pebbles
Case studies

Case study image that shrinks as you scroll

A wide image in a dark rounded card. The scroll drives the scale: as the card moves up, the image shrinks from 100% to 80% and leaves a dark frame around it. Needs Pro.

Scroll the page slowly

In Image Animation (Pro), pick Scale. Set Start Scale to 1, End Scale to 0.8 and Animation Start to Top Center.

Maison FormeProjectsStudioJournal
Our studio

Rooms we design and live in

A warm lounge with wooden slats, armchairs and plants
About pages

Studio photo with a notched edge

A full-width photo cut by a custom shape, with a soft notch at the top centre, then revealed from left to right. This is an Elementor image mask: the shape is Elementor's own Mask option, and the reveal needs Pro.

Scroll to it, or press Replay

Set Height to 600 and Object Fit to Cover. In the Advanced tab, use Elementor's Mask with a custom SVG. Then add the Pro Reveal.

Arolax®WorkCultureCareers
Culture

Life at Arolax

Three colleagues talking over laptops
A team reviewing work on a large screen
A tablet showing a product page
A workshop around a long table
Portrait of a designer
Portrait of a strategist outdoors
A dancer in motion
Team and culture

Team collage of seven shaped photos

Seven photos in five columns, cut as a half circle, squares, a tall centre photo, a circle and a small card. Elementor image shapes like these come from Border Radius and the image files. Each photo reveals on its own, and the centre one rises from the bottom. Needs Pro.

Scroll to it, or press Replay

Each photo is its own Image widget with Object Fit set to Fill and its own Height. In Image Animation (Pro), pick Reveal.

Medica ClinicCareDoctorsVisit
Visit us

A calm place to wait

Daylight, soft chairs and short waits at our new clinic.

A bright waiting room with a yellow sofa and wooden stairs
Banners

Clinic banner that zooms slowly

A wide banner that fades up 40 px, then zooms gently from 100% to 110% inside its frame as the page scrolls past. This is Elementor image zoom on scroll. Both effects need Pro.

Scroll the page slowly

In Image Animation (Pro), pick Scale. Set Start Scale to 1 and End Scale to 1.1. The fade is the Animation tab of Animation Addons Pro.

ShallyWorkAboutContact
Hello, I am Shally

Brand design for calm, honest companies

Twelve years of logos, type and colour for studios, cafes and clinics.

Read my story
Portrait of Shally, a brand designer
Personal brands

Arch portrait on an about page

An arch portrait on a peach grid with an outline arch and a spark. The picture is uncovered from the top down while the whole widget fades up slowly. Needs Pro.

Scroll to it, or press Replay

Set Border Radius to an arch. In Image Animation (Pro), pick Reveal from the bottom. The slow fade is the Animation tab.

Sahara FilmsFilmsCrewContact
Now filming

Wind over the dunes

A documentary about the caravans that still cross the desert.

A man in a blue turban, with only his eyes showing
Film and portfolio

One photo cut into shapes

One wide photo cut into a circle, two bars and a letter shape, so the picture reads like a word. It is revealed from left to right. Needs Pro.

Scroll to it, or press Replay

Set Width to 100%. The cut-out shapes are part of the image. In Image Animation (Pro), pick Reveal and set Animation Start to Top Center.

MalepèreRoomsStayBook
Stay by the sea

Mornings that start with the tide

A small hotel at the edge of the water.

A guest looking out over the sea

Twelve rooms, one shoreline

Breakfast on the terrace from seven, and a path straight down to the water.

Hotels and travel

Elementor image stretch on scroll

A tall pill-shaped photo holds its place while you scroll, and stretches to the full width as its rounded corners flatten. On a real page the section pins; here it runs inside the frame. Needs Pro.

Scroll inside the frame

In Image Animation (Pro), pick Stretch. The image goes from a Width of 500 px to 100% and a Border Radius of 250 px to 0.

Features

Key features of the Image Widget

What the widget gives you, each tied to a setting in the Elementor panel.

Any image, any source

Upload an image or pick one from the media library in Choose Image, or use a dynamic tag such as the featured image.

The right file size

Set the Image Resolution to any size your site registers, from thumbnail to full, so the page loads only what it needs.

Exact sizing per device

Width, Max Width and Height take px, %, em, rem, vw or vh, with separate values for desktop, tablet and phone.

Fit and focus

Once a Height is set, Object Fit crops with Fill, Cover or Contain, and Object Position picks the part that stays in view. This is Elementor image object fit without any CSS.

Hover effects

The Normal and Hover tabs each take Opacity and CSS Filters (blur, brightness, contrast, saturation, hue), with a Transition Duration. That is how you build an Elementor image hover effect, such as a black and white image that turns to colour.

Shapes and depth

Border, Border Radius and Box Shadow turn a photo into a circle, an arch, a pill or a card. Use them for a round image or other Elementor image shapes.

A link on the image

Add a Link with new tab and nofollow options, or a dynamic link. Nofollow is on by default, so turn it off for internal links.

Reveal, scale and stretch with Pro

Animation Addons Pro adds Image Animation to the widget: Reveal from any side, Scale between a Start Scale and an End Scale as the page scrolls, and Stretch from a narrow image to the full width. Set when it starts with Animation Start and the easing with Data Ease. The free widget shows the image without these effects.

Step by step

How to add an image in Elementor

Five steps. The bold names are the labels in the Elementor panel.

  1. Install the free Animation Addons plugin, then turn on Image in Animation Addons → Widgets.

  2. In Elementor, search the panel for Image and drag the Animation Addons Image widget onto the page.

  3. In Choose Image, upload or pick your photo, set the Image Resolution, add a Link if needed and set the Alignment.

  4. In Style → Image, set Width, Height and Object Fit, then Opacity and CSS Filters for Normal and Hover, and Border Radius.

  5. With Animation Addons Pro, pick an Image Animation (Reveal, Scale or Stretch) and scroll the preview to check it.

Try it free Free on WordPress.org · Works with Elementor Free
FAQ

Questions about the Image Widget

How do I add an image in Elementor?

Drag an Image widget onto the page, click Choose Image and upload or pick a photo. Then set its size and style in the Style tab. No code is needed.

Is there a free Elementor image widget?

Yes. The widget and all its content and style settings are in the free Animation Addons plugin. The reveal, scale and stretch effects need Animation Addons Pro.

How do I make an Elementor image hover effect?

In the Hover tab set Opacity and CSS Filters such as blur, brightness or saturation, and a Transition Duration. The image changes smoothly when the pointer moves over it.

How do I get an Elementor black and white image hover?

In the Normal tab set the Saturation filter to 0, and leave the Hover tab at full colour. Set a Transition Duration so the colour fades in.

How do I make an Elementor image reveal animation?

Use the Image Animation extension of Animation Addons Pro and choose Reveal. The image slides in from the left, right, top or bottom in 1.5 seconds as it scrolls into view.

Can I get Elementor image zoom on scroll?

Yes, with Pro. Choose Scale in Image Animation and set a Start Scale and an End Scale. The image zooms between them as the page scrolls. Stretch widens it to full width.

How do I make an Elementor round image?

Use Border Radius: half the width for a circle or pill, or a large top radius for an arch. For other shapes, use Elementor's Mask in the Advanced tab or upload an image already cut out.

How do I add an Elementor image mask?

Use Elementor's own Mask option in the Advanced tab and upload a custom SVG shape. The mask cuts the image to that shape, and a Pro reveal can play on top of it.

How do I set an Elementor image link?

Add a URL in Link, with options to open it in a new tab and to add nofollow. Nofollow is checked by default, so clear it for links inside your own site.

How is it different from Elementor's Image?

It has the same sizing, fit, filter, border and shadow controls in a simpler block. Elementor's Image adds a caption, a lightbox and working hover animations.

Animation Addons Pro · Elementor 4

Place one image, make it count

Size, shape and hover effects for free, with reveal, scale and stretch in Pro.

Get Animation Addons Pro Try it free

Halloween deal40% off every Pro planEnds 5 Nov

  • 15-day money-back guarantee
  • Rated 4.6 / 5 on WordPress.org
  • No Elementor Pro needed
  • Elementor 3 & 4 in one license