悬停时的Jquery图像弹出窗口 [英] Jquery Image popout on hover

问题描述

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

I was wondering how would one do this transition effect in jQuery -

我有一个图像，当我用鼠标悬停在它上面时，图像会略微过渡（放大）&当我将鼠标悬停在图像之外时，它会回落到原来的大小。

I have an image, when I hover over it with my mouse, the image slightly transitions out (enlarges in size) & when I hover out of the image it falls back to its original size.

这种行为就像我们在 Google图片

This behaviour is just like what we see in Google Images

推荐答案

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

I'm not sure about jQuery, but you can use CSS3 transitions. CSS3 transitions don't work in every browser, but if you want to have fun in FF and Webkit...

假设你的图像包含在< a> 标签（修改：示例@ http ：//jsfiddle.net/Kai/x4Frn/ ）：

Assuming your images are wrapped in <a> tags ( Example @ 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);
}

这篇关于悬停时的Jquery图像弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！