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