Zoom et l'échelle se chevauchent texte

Question

Je suis en train de développer l'image en utilisant l'échelle et le zoom sur le vol stationnaire, mais il chevauche le texte sur le vol stationnaire, comme le montre cette image: http://private.teunstrik.com/blog/wp-content/uploads/2017/05/Schermafbeelding-2017-05-13-om-18.16.02.png

Est-ce que quelqu'un sait quel est le problème?

code:

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

Merci

Answer 1

fixes en utilisant une autre classe qui contrôle l'image.

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

Et puis, par exemple:

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