html - Image zoom/grow in a thumbnail -

i have kind of thumbnail image , text inside. when hover on image, zooms in. here fiddle: https://jsfiddle.net/shiroiokami/r1awd3b4/

i want achieve effect image zooms in, it's size stays same. don't want grow. how it?

p.s. code instance:

<div class="wrapper">   <img src="https://pixabay.com/static/uploads/photo/2015/10/01/21/39/background-image-967820_960_720.jpg" style="width:150px;" class="grow">   <div class="description">     <h3>     title     </h3>     <p>     text     </p>   </div> 

css:

.wrapper{   background-color: #fff;   text-align: center;   width: 150px;   overflow: hidden; }  .grow{         transition: .2s ease-in-out;  -webkit-transition: .2s ease-in-out;     -moz-transition: .2s ease-in-out;      -ms-transition: .2s ease-in-out;       -o-transition: .2s ease-in-out;  }  .grow:hover{         transform: scale(1.1); -webkit-transform: scale(1.1);    -moz-transform: scale(1.1);     -ms-transform: scale(1.1);      -o-transform: scale(1.1); }  .description{   background-color: #fff;   overflow: hidden;     } 

i've fixed fiddle, you'll required effect: https://jsfiddle.net/r1awd3b4/1/

what i've done add wrapper div around image:

<div class="img-wrapper">   <img src="..." class="grow">   </div> 

css:

.img-wrapper{   width: 100%;   height: 150px;   overflow: hidden; }  .img-wrapper img{   display: block;   width: 100%; } 

now image can grow wants since wrapper not, image not 'grow', 'zoom'.