Hover scale effect on img causes overflow of parent

Question

On hover, the image should increase in scale, but should not overflow its parent .b which has overflow: hidden .

Currently, the bottom of the image is spilling outside the parent .b on hover.

Here is the example in a fiddle with SCSS.

Here is the example with compiled CSS. Hover over the image:

 .image { display: table; height: 100%; } .image .w { display: table-cell; } .image .b { display: block; overflow: hidden; } .image.va .w { vertical-align: middle; } .image img { max-width: 100%; height: auto; transform: scale(1); } .image:hover img { transform: scale(1.15); } 

 <div class="image va"> <div class="w"> <div class="b"> <img src="http://placehold.it/350x150" /> </div> </div> </div> 

What to do?

Answer 1

The image is escaping the overflow of its container because the image is display: inline and vertical-align: baseline by default.

There are two options

1. It appears there is no need for the image to remain the default display: inline , so make the img display: block to eliminate the overflow

   or

2. Change the vertical-align property of the image to either top / middle / bottom

Full Example - image is display: block

Compiled CSS - also in the fiddle with SCSS

 .image { display: table; height: 100%; } .image .w { display: table-cell; } .image .b { display: block; overflow: hidden; } .image.va .w { vertical-align: middle; } .image img { max-width: 100%; height: auto; transform: scale(1); display: block; } .image:hover img { transform: scale(1.15); } 

 <div class="image va"> <div class="w"> <div class="b"> <img src="http://placehold.it/350x150" /> </div> </div> </div> 

Answer 2

Try this may it helps you.

LINK

img {
    max-width: 100%;
    height: auto;        
    transition: all .2s ease-in-out;
    display: block;
}