I am trying to enlarge an image when the user clicks on the image and then when they click on the next image (this enlarges) and the previously enlarged images foes back to normal size.
My html belo:
<div class="row row-one">
<div class="col text-center">
<img onclick="enlargeImg(this)" class="images-ext" src="images/IMAG000.jpeg" alt="Front">
</div>
<div class="col text-center">
<img onclick="enlargeImg(this)" class="images-ext" src="images/IMAG005A.jpeg" alt="">
</div>
<div class="col text-center">
<img onclick="enlargeImg(this)" class="images-ext"src="images/IMAG006A.jpeg" alt="">
</div>
</div>
Javascript
function enlargeImg(img) {
img.style.transform = "scale(1.5)";
img.style.transition =
"transform 0.25s ease";
}
`
I have tried to create a function that enlarges an image but struggling to make it smaller
2
Answers
You may use the following code:
I think it is self-explanatory.
You could use the CSS zoom property as well. It takes values from 0 to 1 and from 1 to Infinity. Values between 0 and 1 represent zoom-out. 1 represents normal size. values beyond 1 represent zoom.