BLACK FRIDAY: 50% OFF all Pro plans
Pro from $18 a year or $60 lifetime, no code needed
Ends Cyber Monday, 30 Nov. Lock in the price today
Get 50% Off
Free widget

Image Mask Widget for Elementor Free

Put a photo inside a blob, circle, heart or your own shape.

Overview

What Image Mask does

Image Mask places an image inside a shape such as a circle, blob, hexagon, heart, arch or brush stroke, or inside your own SVG or PNG. A colored shape can sit behind it, and gentle motion and hover effects add life to hero and about sections.

Live demo

See it in action

Two young women looking at a smartphone together and laughing
Features

What it can do

  • Fourteen built-in shapes, including an animated morphing blob.

  • Your own SVG or PNG shape: the image shows wherever the file is solid.

  • Fit the shape by stretching, fitting inside or filling and cropping.

  • Box shape from square to wide, and image focus point.

  • Colored shape behind the image, moved and rotated as you like.

  • Motion: float, sway, breathe, or the back shape circling around.

  • Hover: zoom in, zoom out, gray to color or tilt.

  • Optional link on the whole image.

Use cases

When to use it

Hero sections

Show a person or product in a soft blob with a colored shape behind it.

About pages

Put team photos in circles or arches with a slow float.

Brand shapes

Use your logo mark as the mask with a PNG or SVG file.

Setup

How to set it up

A few steps from adding the widget to a finished result.

  1. Drag the Image Mask widget onto the page.

  2. In Image, choose the Image and a Shape.

  3. For your own shape, choose My own shape (SVG or PNG) and pick the Shape File.

  4. Set Box Shape, Image Focus, Width and Alignment.

  5. In Shape Behind and Motion, set the Color, position, Motion and Hover Effect.

  6. Add a shadow or opacity in the Style tab.

FAQ

Questions and answers

Can I use my own shape?

Yes. Choose My own shape (SVG or PNG) and upload a file with a transparent background.

Does the shape behind the image move?

It can. Choose Shape behind circles around under Motion, or move it by hand with Move Sideways and Move Up or Down.

Will it work on phones?

Yes. The mask is plain CSS and scales with the widget width.

Free forever

Image Mask is free

It is one of 48 widgets in the free Bright Addons plugin. Each widget loads its code only on pages that use it.