Overlaying Images

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

Example

• CldImage

  <script>
  	import { CldImage } from 'svelte-cloudinary';
  </script>
  
  <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"
  />

• getCldImageUrl

Learn More

• CldImage
• getCldImageUrl