Zooming in and out of an image/button/link when hovering over an element

You need to use the transform property and set it to scale(1.1) to increase it and scale(0.9) to decrease it. When hovering over an image/button/link with the class button, it will increase by 10% or decrease by 10%.

Increase image/button/link – CSS:

.button:hover {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

Decrease the size of the image/buttons/links – CSS:

.button:hover {
  -webkit-transform: scale(0.9);
  -ms-transform: scale(0.9);
  transform: scale(0.9);
}

If you want to change the size smoothly, then for .button and for .button:hover add:

transition: 2s;

where 2s can be changed to 1 sec, 3 sec etc.