[SOLVED] Overlap images in HTML

If you spent hours trying to find a good solution to overlap images in HTML, this is your final solution. This doesn’t require CSS or Javascript. Only HTML.

This is a tricky way to overlap images without using that annoying absolute CSS property misused.

In fact if you use the position:absolute property, you will not be able anymore to encapsulate the images in divs, align or move them as a standard object in the webpage.

The following snippet exploit SVG tag to overlap multiple images. Think a SVG like a canvas where you can paint everything you want. In this context we can put as many components as we desire because actually the SVG is not a container, but is treated like an image.

<div style="float:left">
  <svg width="338" height="104">
    <clipPath id="myContainer">
      <rect width="338" height="104"></rect>
    <image width="338" height="104" xlink:href="https://www.edoardovignati.it/wp-content/uploads/2021/06/overlap-sunset.png" clip-path="url(#myContainer)"></image>
    <image width="338" height="104" xlink:href="https://www.edoardovignati.it/wp-content/uploads/2021/06/overlap-mountain.png" clip-path="url(#myContainer)"></image>

And here below the awesome result!

This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.