图像缩放/成长在缩略图

Question

我有一种图像和一些文字里面的缩略图。当我将鼠标悬停在图片，它会放大 这里是一个小提琴： https://jsfiddle.net/ShiroiOkami/r1awd3b4/

我想达到的图像只是拉近的效果，但它的尺寸保持不变。我不希望它增长。怎么做？

P.S.例如代码：

<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

我定你的小提琴，所以你会得到所要求的效果：https://jsfiddle.net/r1awd3b4/1/

我有什么完成是在图像周围添加一个额外的包装div：

<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%; 
} 

现在的图像能够种植就是了，但因为包装不会，图像不会“成长”，而只是“放大”。

Answer 2

可能是你的意思是这样的效果？：

<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> 

和CSS：

.img-container { 
    width: 150px; 
    height: 150px; 
    overflow: hidden; 
}