CSS Image zoom in on hover

Question

I have managed to create a zoom in effect for image on hover. However the problem is that image is moving to the right bottom corner while mouse is over. I would like to zoom in to the center-center. How it possible?

I have tried to use transform scale(1.1); and it works for zooming in to the center-center but then transition effect doesn't work. So image is just jumps to 1.1 on mouse over and effect is not smooth anymore.

PS I am using Joomla and SP Page Builder

.sppb-col-md-3
{
  overflow: hidden; 
}
.hover03
{
  height: 100%;
  width: 100%;

          transition: all 1s ease;
}
.hover03:hover
{
  width: 110%;
  height: 110%;
}

Answer 1

You should apply the transition to the element, img tag in your case, and the effect (ie transform: scale;) on :hover. Hope that helps!

Have a look at this working example:

https://codepen.io/Angel-SG/pen/JwJzxg

 .img-outer { overflow: hidden; max-width: 300px; max-height: 300px; } .img-inner { position: relative; } img { transition: 0.5s ease; } img:hover { transform: scale(1.2); }

 <div class="img-outer"> <div class="img-inner"> <img src="https://via.placeholder.com/300C/O https://placeholder.com/" alt="image"> </div> </div>