Guides
Image Overlays

Overlaying Images

You can add images on top of other images by using image-based overlays.

Example

Turtle with earth
import { CldImage } from 'next-cloudinary';
 
<CldImage
  width="960"
  height="600"
  src="images/turtle"
  sizes="100vw"
  overlays={[{
    publicId: 'images/earth',
    position: {
      x: 50,
      y: 50,
      gravity: 'north_west',
    },
    effects: [
      {
        crop: 'fill',
        gravity: 'auto',
        width: 500,
        height: 500
      }
    ]
  }]}
  alt="Turtle with earth"
/>

Learn More