悬停颜色叠加：jQuery马赛克插件

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