Table of Contents
With a little CSS code you can overlap two images, to make interesting compositions. It just needs a little CSS code to make it work.
How to overlap two images
- Add an ID to each image in the composition, via each one’s Settings tab. I’ve used top-image and main-image in this demo.
- Add an Embed element to your page and set it to Hidden, and Head.
- Add this code to the embed:
<style>
#main-image { position: relative; }
#top-image { position: absolute;top: -.1em; left: -.5em;z-index: 50; }
</style>Note: you may have to adjust the CSS positioning in the above code, as it will depend on the layout and position of your existing image, and your general layout.
We hope you liked this tutorial. Check out other Carrd tips & tricks.
Written by
