I have a unique layout where two images are stacked on top of each other in a container to create a fade effect.
This is how it appears in the code:
<div id="container">
<img id="mainpictop" on-load="{{fade}}" src="{{pic1source}}" style="opacity:{{pic1opacity}}">
<img id="mainpicbottom" on-load="{{fade}}" src="{{pic2source}}" style="opacity:{{pic2opacity}}">
</div>
Here is my CSS:
#container{
display: block;
position: relative;
overflow: hidden;
height: 24em;
}
img {
position: absolute;
width: 100%;
transition: opacity 1s;
-webkit-transition: opacity 1s;
}
The images scale properly, but I encounter a gap issue when resizing the page due to the fixed height of the container. How can I make the container resize dynamically using only CSS and HTML?