Question

我正在尝试用CSS做一些事我以前没想到过。当鼠标悬停在img上时，我已经使用CSS来使图像变得更大（平滑地增大）。这是一个很好的效果，可用于制作漂亮的投资组合或酷苹果OS X码头等菜单。但是，我最近看到一个网站缩放图像，使其缩小，然后显示文本，并认为它很棒。它使用JavaScript和一些JQuery的提示，但我想知道这是否可以单独用CSS完成？下面是放大图像的代码：

a:hover, a:focus { 
    z-index:440 
}
a img {
    border:0;
    -webkit-transition:all .2s; 
    -moz-transition:all .2s;
}
ul.Port a img {
    -webkit-transform-origin: top;/
    -moz-transform-origin: top; 
}
a:hover img, a:focus img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
}

如果我将值更改为负值，我会遇到img闪烁进出正确大小的问题，并且它会平滑地缩小，但会变得根除。我要求做的只是在CSS中不可能吗？或者我错过了什么？我已经玩了几个小时，但是无法让它工作。

Answer 1

<强>解决方案：

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <style type="text/css">
            img {
                margin-top:50px;
                -webkit-transition:all .2s; 
                -moz-transition:all .2s;
            }
            img:hover {
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
            }
        </style>
    </head>
    <body>
        <img src="top.png" alt="" />
    </body>
</html>

使用CSS反转图像比例？

1 个答案: