jquery - on Mouse-Hover Image Focused / Grid 画廊

Question

现场演示

这个概念的需要是……
有缩略图。
缩略图仍然被黑色覆盖层覆盖）。
在将鼠标悬停在某个图像上时，它会被点亮（或者翻转或旋转的动画将是一个奖励......哈哈）
点击时，图像通过fancybox被带到它的真实尺寸。

我已经调整了花哨的盒子脚本并且花哨的盒子功能已经发生了。

$(".fancybox").fancybox({
    padding : 0,
    openEffect: 'elastic',
    openSpeed: 250,

   closeEffect: 'elastic',
   closeSpeed: 450,
   closeClick: false,

    helpers : {
    overlay : {
        css : {
            'background' : 'rgba(0, 0, 0, 0.9)'
        }
    }
}

});

工作代码
我需要一些帮助来修改悬停功能（或动画）的现有代码（^_^）
干杯！

Answer 1

如何在悬停时获得动画的快速示例：

$(".fancybox").on("mouseenter", function() {
    $(this).find("img").stop(true, true).animate({
        "opacity": 0.1
    }, "slow");

}).on("mouseleave", function() {
    $(this).find("img").stop(true, true).animate({
        "opacity": 1
    }, "slow");

}).fancybox({
    padding: 0,
    openEffect: 'elastic',
    openSpeed: 250,

    closeEffect: 'elastic',
    closeSpeed: 450,
    closeClick: false,

    helpers: {
        overlay: {
            css: {
                'background': 'rgba(0, 0, 0, 0.9)'
            }
        }
    }

});​

您的工作代码已更新

这是创建所需效果所需的基本结构。

... or an animation of flip or rotation would be a bonus

...您是在谈论 $$$ 奖金吗？;)