Question

我正在尝试使用css，

在悬停时缩放图像

这是我的代码

HTML：

<div class="cli-wrap">
<ul class="clearfix" id="ci-list" style="width: 2640px;">
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/1.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/2.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/3.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/4.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/5.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/6.png"></a></li>
    <li style="margin-left: 0px;" class="zoomage"><a target="_blank" href="#"><img border="0" src="images/7.png"></a></li>

</ul>
</div>

CSS：

.zoomage:hover img {
    -webkit-transform:scale(7.10); /* Safari and Chrome */
    -moz-transform:scale(7.10); /* Firefox */
    -ms-transform:scale(7.10); /* IE 9 */
    -o-transform:scale(7.10); /* Opera */
     transform:scale(7.10);
    z-index:1;
}

.cli-wrap {
    display: block;
    margin: 0 auto;
    overflow: hidden;
    padding: 40px;
    width: 620px;
    z-index: -1;
}

此处图像在悬停时缩放，但图像在div .cli-wrap中缩放。图像缩放到大尺寸但它只在div内缩放。但我需要在div之外缩放图像。我尝试使用z-index进行div .cli-wrap

我该怎么做？

Answer 1

我以更简单的方式实现了这个结果：

而不是：

.zoomage:hover img {
-webkit-transform:scale(7.10); /* Safari and Chrome */
-moz-transform:scale(7.10); /* Firefox */
-ms-transform:scale(7.10); /* IE 9 */
-o-transform:scale(7.10); /* Opera */
 transform:scale(7.10);
z-index:1;
}

我做了

.zoomage:hover{
    width:1848px;
   /*somevalue here, you chose what u want here, ie the scaled down image*/
}

希望这有帮助！

Answer 2

你可以给图像提供绝对位置，这样就可以看出div了：

 .zoomage:hover img {
                position: absolute;
                overflow: hidden;
                top:300px;
                left:300px;
                transition: all 1s ease;
                -webkit-transform:scale(7.10); /* Safari and Chrome */
                -moz-transform:scale(7.10); /* Firefox */
                -ms-transform:scale(7.10); /* IE 9 */
                -o-transform:scale(7.10); /* Opera */
                transform:scale(7.10);
                z-index:1;


            }

如何从div中缩放图像？

2 个答案: