Overlaying Images
You can add images on top of other images by using image-based overlays.
Example
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"
/>