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.