How to make images overlap in Carrd

With a little CSS code you can overlap two images, to make interesting compositions.

How to make images overlap in Carrd
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.
notion image

How to overlap two images

  1. 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.
  1. Add an Embed element to your page and set it to Hidden, and Head.
  1. Add this code to the embed:
    1. <style>
      #main-image { position: relative; }
      #top-image { position: absolute;top: -.1em; left: -.5em;z-index: 50; }
      </style>
 
We hope you liked this tutorial. Check out other Carrd tips & tricks.
We hope you liked this tutorial. Check out other Carrd tips & tricks.
 

We send weekly, very short emails featuring Carrd resource links

Join the Starrt mailing list

Subscribe

Written by