I am looking to implement a unique feature on my website where image placeholders are displayed for 1 second before fading out to reveal the actual image. These image containers will be responsive, adjusting to fit the size of their parent container.
In addition, I want to place the images randomly in one of four positions within the container: top, bottom, left (for portrait), or right (for landscape).
There seems to be some inconsistencies between how Chrome and Safari handle SVGs placed over images. In Chrome, the SVGs appear on top of the images, while in Safari, they are centered inside the SVG element.
.container {
width: 100%;
height: 100%;
display: flex;
position: relative;
}
.container img {
max-width: 100%;
max-height: 100%;
}
.continer svg {
max-width: 100%;
max-height: 100%;
position: absolute;
}
.container svg rect {
width: 100%;
height: 100%;
}<div class="container position-top">
<svg viewBox="0 0 63.863757317722 100" xmlns="http://www.w3.org/2000/svg">
<rect width="1200" height="1879"></rect>
</svg>
<img src="image.jpg" alt="">
</div>If you would like to see this feature in action, check out the codepen link below: https://codepen.io/bbbellon/pen/PoxYQpP