html5 图片 遮罩层,6种炫酷的鼠标滑过图片显示遮罩层特效

这是一款使用jQuery和CSS3制作的炫酷的鼠标滑过图片显示遮罩层特效。该图片制作层特效共6种不同的效果，使用一些简单的jQuery代码和CSS3过渡效果来完成，简单实用，可以为网站图片添加非常不错的效果。

制作方法

HTML结构

该图片遮罩效果的基本HTML结构如下：

+

x

...

在上面的.close-overlay标签是一个关闭按钮，它用于在移动触摸设备中关闭遮罩层，在大屏幕显示器中你不会看到它。

CSS样式

该图片遮罩层效果的通用CSS样式如下：

.effects {

padding-left: 15px;

}

.effects .img {

position: relative;

float: left;

margin-bottom: 5px;

width: 25%;

overflow: hidden;

}

.effects .img:nth-child(n) {

margin-right: 5px;

}