Diagonally Overlapping Images

|

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.

0 Comments

Submit a Comment

Comments are manually moderated and approved at the time they are answered. A preview is shown while pending but may disappear if your are cookies cleared - don't worry though, the comment is still in the queue.

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

We may earn a commission when you visit links on our website.