html - 如何从div缩放图像？

我正在尝试使用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

我怎样才能做到这一点？

最佳答案

我以一种更为简单的方式实现了这一结果：

代替这个：

.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*/
}

希望这可以帮助！

关于html - 如何从div缩放图像？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/26601961/