on Mouse-Hover Image Focused / Grid 画廊

Question

Live Demo

这个概念的需要是......
有缩略图。
缩略图仍然被黑色覆盖层覆盖）。
鼠标悬停在某个图像上时，它会亮起（或者翻转或旋转的动画将是一个奖励......哈哈）
单击后，图像会通过 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)'
        }
    }
}

});

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

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

});​

你的工作代码UPDATED

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

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

...您是在说 $$$ 奖金吗？ ;)