ズームとスケールは、私はスケールを使用して画像を拡大し、ホバーにズームしようとしていますが、この画像のように、それは、ホバー上のテキストを重複しているテキスト

Question

が重複している：http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-18.16.02.png

誰もが問題なのか知っていますか？

コード：

div.item { 
    overflow: hidden; 
} 

.item img { 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -moz-transform: scale(1,2); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
} 


.item img:hover { 
    -moz-transform: scale(2,1); 
    -webkit-transform: scale(2,1); 
    transform: scale(2,2); 
} 

おかげ画像を制御し、別のクラスを使用して固定

Answer 1

。

.zoom-image { 
     width: 100%; 
    height:75px; 
    overflow: hidden; 
} 

.item img { 
    -moz-transition: all .5s; 
    -webkit-transition: all .5s; 
    transition: all .5s; 
    -moz-transform: scale(1,2); 
    -webkit-transform: scale(1,1); 
    transform: scale(1,1); 
} 


.item img:hover { 
    -moz-transform: scale(2,1); 
    -webkit-transform: scale(2,1); 
    transform: scale(2,2); 
} 

そして、例えば：

<div class="item"> 
    <div class="zoom-image"> 
    <img src="http://prizem.dreamhosters.com/test/test_small_1.jpg"> 
</img> 
    </div> 
    <span class="caption">Test image 
    <br><a href="#">Bekijk...</a></span> 
</div>