Clipping and Masking Elementor Images

Learn two easy ways to turn Elementor images into any shape you want.
Method 1: Simple clipping CSS. Generate image clipping CSS easily:
bennettfeely.c...
Method 2: Mask images into custom SVG shapes using the "Advanced: Mask" tab on the image widget.
Master image sizing and ratios in Elementor: • Master Elementor Image...
Download Elementor Pro here: bit.ly/element...
We may receive a small affiliate kickback, at no added expense, if you purchase any of these solutions using our links. Thanks for your support!

[@stevemcirvin]

Thanks for doing all these great videos lately! When are you going to do a video on flexbox versus grid? Now that Grid seems to be widely available, it would be a great time to show us when to use which.

[@KingGrizzly]

Thanks Steve! Good idea, I finally found a reason to use the grid widget this week and had to use CSS to make it span correctly.

[@KingGrizzly]

Hi Steve! We have another video that shows a good use case for grid with Elementor's loop grid widget and some additional CSS. You might find it useful! ruclips.net/video/wDlVUzx30hk/видео.html

[@frankstone]

This is a great tool. Thank You. Question: How would I apply a clip to all the images contained within an image gallery?

[@frankstone]

The same question if an image is contained within a text editor widget.

[@KingGrizzly]

@@frankstone Hi Frank. Click on the widget (eg: the gallery widget or text-editor widget), go to the "Advanced" tab, and enter a class name in the 'Class' field. Such as:
image-clip (no period)
Then your CSS, instead of 'selector' would use something like:
.image-clip img {
/* Your clipping CSS styles */
}
This should style every image inside the widget with the class .image-clip with your style.
However, most likely, you may discover this is too greedy and clips some images you don't desire the effect on. If this happens, you'll need to figure out what class is on the individual image items you do want to target.
To do this, inspect the image in your browser using the browser's inspector/developer tools (easy to Google how to do this, maybe just right click - Inspect), and try to figure out what class might be on or around the individual images.
For example, inside of the gallery it is likely something along the lines of .e-gallery-image or .elementor-gallery-item__image. In which case your CSS would be something like:
.image-clip .e-gallery-image {
/* Your clipping CSS styles */
}
Ideally, you can just store this CSS in a centralized place like Elementor > Custom Code and then use the class wherever you need it throughout the site.
Let me know if this helps!

[@frankstone]

@@KingGrizzly Hi Brian. IT WORKED! Thank you very much. FYI, I needed to use ".image-clip .e-gallery-image."

[@KingGrizzly]

@@frankstone Excellent! Good work and happy web designing.