Diagonally Overlapping Images

This post may contain referral links which may earn a commission for this site

Foreground image

Background image

Combined images

Here's a quick tip for using the Divi Theme's image module to do a diagonal overlay of two different images.

Create an image module and set one of your images (the one you wish to appear at the top right) as the main image for the module. Then set the other image as the background image for the module. NB: I'm assuming they are the same size for this.

Now give the module a CSS class of "diagonal-overlay" (without the quotes), in "Image Settings > Advanced > CSS ID & Classes > CSS Class".

Finally, add the following CSS to your page / site:

.et_pb_image.diagonal-overlay img {
	-webkit-clip-path: polygon(0 0, 0% 100%, 100% 0);
	clip-path: polygon(0 0, 0% 100%, 100% 0);

You should now get something like the last of the three image modules above. Note that I've used a gif as the background image. If you want to change the shape of the overlap, I recommend using Clippy to get the CSS for your desired shape.

Hundreds of new features for Divi
in one easy-to-use plugin


Submit a Comment

Your email address will not be published. Required fields are marked *