Question 108430 in Html Question posted in
Some basic documentation can be found here.

Html – How to enlarge image on click and back to normal size with another click

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

Tags:

2

Answers


  1. 0

    You may use the following code:

    let enlarged=0;
function toggleEnlargeImg(img) {
     if (enlarged===0){
       img.style.transform = "scale(1.5)";
       img.style.transition =
       "transform 0.25s ease";
       enlarged = 1;
     }
     else{
       img.style.transform = "scale(1)";
       img.style.transition =
       "transform 0.25s ease";
       enlarged = 0;
     }
     return enlarged;
  }

    I think it is self-explanatory.

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search