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>

缩放和缩放是重叠文本

1 个答案: