悬停的颜色覆盖层:jQuery Mosaic插件

Question

如何将覆盖层叠加在悬停在这里的马赛克元素上：http：//tympanus.net/development/gridloadingeffects/index.html

我想实现的效果可以在这里看到：http：//ultravisualtheme.tumblr.com/

我只需复制第二个链接，但是我无法理解代码。我要求执行第一个链接的原因是因为我实际上可以理解那里发生了什么，并且可以以类似的方式进行编码。

Answer 1

基本上，您必须在包含图像的DIV上创建覆盖层。使其成为该div的孩子，并使用此CSS：

#image:hover > .overlay {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#000;
    opacity:0.5;
    border-radius:30px;
}

您实际上不需要任何jQuery。

小提琴：http：//jsfiddle.net/6bjtq/

但是，如果您想无论如何都要使用jQuery，请使用：

$("#image").hover(function() {
    $(".overlay").css({//here goes the same css definition});
}, function() {
    $(".overlay").css({//reset css to default values after you hover out});
});