画像ズーム/サムネイルで拡大

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