I have tried many solutions, but none seem to work for me.
Here is the code I am using:
$(function() {
$(".zoom-close").on("click", function() {
$(".zoom-close").toggleClass("transform", 1000);
$(".img").toggleClass("active", 1000);
});
});body {
background: red;
width: 100%;
margin: 0;
}
.col {
width: 30%;
}
.img {
display: block;
transition: all 0.5s ease;
position: relative;
transition: all 0.5s ease;
-webkit-transition: 1s
}
// CSS code continues...
.zoom-close.transform .zoom-inner {
opacity: 0;
transition: all 0.5s ease;
}
// Further CSS properties...
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="col">
<div class="img">
<img src="https://via.placeholder.com/250">
<button class="zoom-close">
<div class="zoom"><span class="zoom-inner"></span> </div>
</button>
</div>
</div>I need assistance with the following problem statement:
<div class="img"> should adjust to fit the window size (100% width) when the
<button class="zoom-close">(Please note: While the CSS transform property is not mandatory, I require an effect similar to it.)