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>
</clipPath>
<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>
</svg>
</div>
And here below the awesome result!
This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.