I am in the process of developing a new website where I have implemented two crossfading images placed side by side within separate div elements. While these crossfading images work flawlessly on a full-screen display, they do not adjust when the browser window is resized. I aim to make these images responsive, meaning they should scale down and fit according to the device's screen size, similar to how responsive websites operate.
.wrapper {
display: flex;
}
.le,
.ri {
height: 30%;
width: 50%;
}
.le {
float: left;
align-self: center;
}
.ri {
float: right;
align-self: center;
}
</style><style type="text/css">.responsive {
width: 761px;
max-width: 100%;
height: auto;
}
</style><style type="text/css">.responsive1 {
width: 761px;
max-width: 100%;
height: auto;
}
</style><style type="text/css">#cf img {
position: absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.responsive1:hover {
opacity: 0;
}
</style><style type="text/css">#cf1 img {
position: absolute;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf1 img.responsive2:hover {
opacity: 0;
}
<div class="wrapper">
<div id="cf" class="le">
<a href="#">
<img class="responsive" src=".jpg">
<img class="responsive1" src=".jpg">
</a>
</div>
<div id="cf1" class="ri">
<img class="responsive" src=".jpg" />
<img class="responsive2" src=".jpg" />
</div>
</div>