What to do so that when the user hover over an image, it widens a bit? (preferably using only HTML and CSS)

It's very simple, you just really need CSS . Here is 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 increase effect. To make it more time consuming simply increase that number. In the next line we have the style applied when moving the mouse over, the :hover trigger. In it we inform the value of the CSS property transform with the scale 1.1 . If you want an even larger size increase, you can change its value to 1.2, 1.3, and so on.

Follow the example

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

img:hover{
  width: 150px;
}

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