What to do so that when the user hovers over an image, it expands a little? ( preferably using only HTML and CSS)

Question

I wanted that when the user passed the cursor over a given image, the image would zoom in a little bit, and that’s all.

Answer 1

Follow the example

img{
  width: 100px;
  transition: 0.5s;
}

img:hover{
  width: 150px;
}

<img src="https://file.iviewui.com/dist/76ecb6e76d2c438065f90cd7f8fa7371.png">

Answer 2

It’s pretty simple, you just really need to CSS. Follow an example:

.grow { transition: all .2s ease-in-out; }
.grow:hover { transform: scale(1.1); }

<img class="grow" src="https://i.stack.imgur.com/oURrw.png" />

In the code snippet above the CSS property transition has in its value the item .2s representing the time of the size-increasing effect. To make it more time-consuming just increase this number. In the next line we have the style applied when passing the mouse over, the trigger :hover. In it we inform the value of the CSS property transform with the scale 1.1. If you want an even bigger size increase, you can change its value to 1.2, 1.3 and so on.