html - Faulty image-hover effect -

i have 4 equally sized images, set 20% width of page

<div class="portrait">     <img src="#"> </div> <div class="portrait">     <img src="#"> </div> <div class="portrait">     <img src="#"> </div> <div class="portrait">     <img src="#"> </div> 

in website horizontally aligned. on hover, want image zoom inside original border (like https://codepen.io/math2001/pen/zzxbbj?editors=1100), did css3 transition , overflow: hidden.

.portrait { float: left; width: 20%; overflow: hidden; } .portrait img { width: 100%; transition: transform 0.2s linear; } .portrait img:hover { transform: scale(1.1); } 

the width of image not overflow past original 20% constraint of portrait, height does. know problem there no fixed constraint height of wrapper divs, don't know how create one, since percentage scaled. how can fix this?

put transform on container rather image:

.portrait {    float:left;    width:20%;    overflow:hidden;    transition:transform 0.2s linear;  }  .portrait img {    width:100%;  }  .portrait:hover {    transform: scale(1.1);  }

<div class="portrait">      <img src="http://placehold.it/250x250">  </div>  <div class="portrait">      <img src="http://placehold.it/250x250/000/ccc">  </div>  <div class="portrait">      <img src="http://placehold.it/250x250/aaa/eee">  </div>  <div class="portrait">      <img src="http://placehold.it/250x250/ccc/fff">  </div>