Search code examples
cssimagehovertransformscale

Img transition scale changes container

I have an img tag that I want to zoom in on when hovering on a parent element, without having the container change size. I have the code:

 .results_box_custom:hover  p img{
 -moz-transform: scale(1.2);
 -webkit-transform: scale(1.2);
 transform: scale(1.2);
 -moz-transition: all 0.3s;
  -webkit-transition: all 0.3s;
  transition: all 0.3s ease-in-out;
}

Which works on a different page but not on this page.

any help is appreciated!

Solution

  • You want to hide the overflow on the parent element. Add .results_box_custom p { overflow: hidden; }