Image to become smaller when mouse points at it / HTML, CSS

Issue

I am working on a homepage for my first project in web development and I want to make the images to become smaller when mouse points at them. How can I do this?

Solution

You can use css :hover and the transform property to achieve this.

An added bonus with transform is that other content underneath the image does not move.

.img {
  transition: transform 350ms ease;
}
.img:hover {
  transform: scale(.75);
}

<img src="https://via.placeholder.com/350x150" class="img" />

<h2>This is other content underneath the img</h2>

Answered By - AlphaHowl