How to Click or Hover on the Image to Enlarge in HTML

1. Change the Size of the HTML Image on Hover
2. Use HTML and JavaScript to Enlarge the Image When the User Clicks on the Image

This article will teach us to enlarge the HTML image when users click or hover over a particular image.

As a user of the image gallery, you would have seen the user interface where multiple images reside and when you hover over a single image, it enlarges. We will learn different methods in this article to enlarge images by hovering over or clicking.

Change the Size of the HTML Image on Hover

We can enlarge a particular image using HTML and CSS when the user hovers over that. In the example below, we have created five img elements with different values of the src attribute.

Here, users can see that all images will be displayed inline in the same row.

We have also used CSS styling to set the height and width of every image element. We’ve assigned a 200px height and width for every element.

We’ve also set a 10px margin for every img element to leave space around the image.

We used the CSS’s : hover property to add the hover effect. Inside the img: hover block of CSS, we have set a 400px height and width for the image element, which means that whenever users hover over the image, it will be scaled by 2x.

Example Code:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg"/>
<img src="/img/DelftStack/logo.png"/>
<img src="/img/DelftStack/logo.png"/>

img {
    height: 200px;
    width: 200px;
    margin: 10px;
}
img:hover{
    height: 400px;
    width: 400px;
}

In the above output, users can see that when we hover over any image, the size of that image increases.

Also, we can use the transform CSS property to enlarge the HTML image. The transform property allows us to transform any HTML element and an image is one of them.

It means we can do scaling, rotating, translation, etc., with the image. Here, we will apply the scaling on the image to enlarge it.

In the below example code, we have added the transform: scale(2) CSS style inside the img:hover block. It will multiply the image’s height and width by 2 when the user hovers over the particular image.

The transform: scale(multifactor) takes the single parameter called multifactor. So, it increases the size of the element by multifactor.

In our case, we have used the 2 as a value of multifactor, so it will enlarge the image by 2x.

Example Code:

img:hover{
    transform:scale(2);
}

Use HTML and JavaScript to Enlarge the Image When the User Clicks on the Image

We can use HTML and JavaScript to enlarge the image when the user clicks on the image. In this example, we have created five HTML images and assigned height and width to every img element as an attribute.

In JavaScript, we have accessed all img elements by the tag name, which is stored inside the images variable. After that, we iterated through the images array and added the addEventListener method to every image.

The addEventListner method takes two arguments; the first argument is a type of event, and another is the callback function. Here, we have used the click event as the first argument, so the callback function will be executed whenever users click on any image element.

We can change the style of the img element using the element.style property. Here, we have used the image[i].style.transfrom property in JavaScript to apply the CSS transform property to the image element.

Inside the callback function, we are iterating through the images array to resize the other images except for the clicked image. Next, we are changing the transform style to scale(1.3) for the clicked element.

Also, we have added some margin to the clicked element for a better look using JavaScript.

Example Code:

<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="https://pbs.twimg.com/profile_images/959568688654553089/PuZWi9tj_400x400.jpg" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>
<img src="/img/DelftStack/logo.png" height="200px" width="200px"/>

var images = document.getElementsByTagName('img');
for (var i = 0; i < images.length; i++) {
  images[i].addEventListener('click', function() {
    for (var j = 0; j < images.length; j++) {
      if (i != j) {
        images[j].style.transform = 'scale(1)';
      }
    }
    this.style.transform = 'scale(1.3)';
    this.style.margin = '40px'
  });
}

Output:

In the above output, users can observe that when we click on the image, it enlarges, and other images resize to their original size. Also, there is no effect when we hover over the image.

We have learned three different methods to enlarge images in this article. The first two methods use the CSS : hover property, and the third uses the JavaScript addEventListener method.