How to zoom in using CSS transitions

Ever mouse over an image on a website and it zooms in subtly and then you move your mouse pointer off the image, and it goes back to normal? Well, they are most likely using a CSS transition to make that effect.

Below is some CSS and HTML code to use to make that effect. Yes, that is all the code you need. Check out the transition and transform pages on Mozilla’s MDN Web Docs for more information.

CSS Code

<style>
.img{
  transition: all 1.1s ease;
}
.img:hover{
  transform: scale(1.1);
}
</style>

HTML Code

<img src="path to your image file" class="img">