这是用jQuery和CSS3制作的很棒的鼠标影像显示了口罩层的特殊效果。 该图片制作层的特效共有6种不同的特效，使用几个简单的jQuery码和CSS3过渡效果即可完成，简单实用，可以为网站图片添加非常好的特效。
制作方法
HTML结构
这个图像蒙版效果的基本HTML结构如下。
x
.
上面的. close-overlay标签是一个关闭按钮，用于在移动触摸设备上关闭遮罩层，在大屏幕显示器上不可见。
CSS样式
此图像蒙版图层效果的典型CSS样式如下：
. effects {
padding-left: 15px；
}
. effects .img {
定位：关系；
浮动：左；
边距- bottom : 5px；
width: 25%；
overflow :隐藏；
}
. effects.img:nth-child(n ) {
边距-右： 5px；
}
. effects.img :第一个child {
边距左边缘：-15px；
}
. effects .img:last-child {
边距-右： 0；
}
. effects .img img {
显示：块；
边距： 0；
padding: 0；
最大宽度： 100 %；
height :自动；
}
. overlay {
显示：块；
定位：助手；
z-index: 20；
background : rgba (0，0，0，0.8 )；
overflow :隐藏；
transition: all 0.5s；
}
a.close-overlay {
显示：块；
定位：助手；
top: 0；
right: 0；
z-index: 100；
width: 45px；
height: 45px；
字体大小： 20px；
字体权重： 700；
color: #fff；
line-height: 45px；
文本照明3360中心；
background-color: #000；
cursor: pointer；
}
a.close-overlay.hidden {
显示： none；
}
a.expand {
显示：块；
定位：助手；
z-index: 100；
width: 60px；
height: 60px；
border: solid 5px #fff；
文本照明3360中心；
color: #fff；
line-height: 50px；
字体权重： 700；
字体大小： 30px；
border-radius: 30px；
}
上面的通用CSS样式为蒙版图层、链接按钮和“关闭”按钮提供了所需的样式。 效果1的图像蒙版图层样式如下所示。
/*=======================================================================================
EFFECT 1 - SLIDE IN BOTTOM
=========================================================================================
#effect-1 .overlay {
bottom: 0；
left: 0；
right: 0；
width: 100%；
height: 0；
}
#effect-1 .overlay a.expand {
left: 0；
right: 0；
bottom: 50%；
margin : 0自动- 30px自动；
}
#effect-1 .img.hover .overlay {
height: 100%；
}
JAVASCRIPT
此图像蒙版图层效果使用Modernizr来检测浏览器，并在适当的事件中向图像添加和删除适当的CLASS。
$ (document.ready (function ) )。
if(modernizr.touch ) {
//show the close overlay button
$('.close-overlay ' ).removeclass('hidden )；
//handletheaddingofhoverclasswhenclicked
$('.img ' ).click(function(e ) )
if (！ $(this ).Hasclass('Hover ' ) }{
$(this ).addclass('hover )；
}
)；
//handle the closing of the overlay
$('.close-overlay ' ).click(function(e ) )
e.preventDefault (；
e.stopPropagation (；
if($ ) this ).closest )、'.img )、hasclass )、' hover ' ) {
$(this ).closest('.img ' ).removeclass ) ' hover ' )；
}
)；
} else {
//handlethemouseenterfunctionality
$('.img ' ).mouseenter(function ) ) )。
$(this ).addclass('hover )；
() )
//handlethemouseleavefunctionality
. mouseleave(function ) }
$(this ).removeclass('hover )；
)；
}
)；