悬停时的Jquery图像弹出窗口

Question

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

我有一张图片，当我用鼠标悬停在图像上时，图像略微过渡（放大尺寸）＆amp;当我将鼠标悬停在图像上时，它会回落到原来的大小。

这种行为就像我们在Google Images

中看到的那样

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);
}

Answer 2

查看以下链接 -

http://www.sohtanaka.com/web-design/fancy-thumbnail-hover-effect-w-jquery/

http://justinfarmer.com/?p=31

你可以谷歌了解更多。