css - 缩放和缩放是重叠的文本

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>