悬停时Jquery图像弹出窗口

Question

我想知道如何在jQuery中实现这种过渡效果 -

我有一个图像,当我用鼠标悬停在图像上时,图像稍微过渡(放大尺寸),当我将鼠标悬停在图像上时,它会回落到原始大小.

这种行为就像我们在Google图片中看到的那样

Answer 1

我不确定jQuery,但你可以使用CSS3过渡.CSS3过渡在每个浏览器中都不起作用,但是如果你想在FF和Webkit中获得乐趣......

假设您的图像包含在<a>标签中(编辑:示例@ http://jsfiddle.net/Kai/x4Frn/):

a img {
    -webkit-transition: -webkit-transform 0.3s ease;
    -moz-transition: -moz-transform 0.3s ease;
    -o-transition: -o-transform 0.3s ease;
    transition: transform 0.3s ease;
}

a:hover img {
    -webkit-transform: scale(1.5);
    -moz-transform: scale(1.5);
    -o-transform: scale(1.5);
    transform: scale(1.5);

    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.5);
}