Image zoom/grow in a thumbnail - html

Question

I have kind of a thumbnail with an image and some text inside. When I hover over the image, it zooms in.
Here is a fiddle:
https://jsfiddle.net/ShiroiOkami/r1awd3b4/
I want to achieve an effect that the image just zooms in, but it's size stays the same. I don't want it to grow. How to do it?
P.S. the code for 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>
Some title
</h3>
<p>
some text
</p>
</div>
CSS:
.wrapper{
background-color: #fff;
text-align: center;
width: 150px;
overflow: hidden;
}
.grow{
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .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;
}

Answer 1

I've fixed your fiddle, so you'll get the required effect: https://jsfiddle.net/r1awd3b4/1/
What I've done is add an extra wrapper div around the 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 the image can grow all it wants but since the wrapper will not, the image will not 'grow', but just 'zoom'.

Answer 2

may be you mean this effect?:
<div class="wrapper">
<div class="img-container">
<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>
<div class="description">
<h3>Some title</h3>
<p>some text</p>
</div>
</div>
and the css:
.img-container {
width: 150px;
height: 150px;
overflow: hidden;
}