html5鼠标悬停遮罩,CSS3鼠标hover图片遮罩层动画效果

这是一款使用CSS3制作鼠标hover图片遮罩层动画效果。该特效完全使用CSS3来制作&＃xff0c;在鼠标hover图片时&＃xff0c;会生成一个不同颜色的遮罩层&＃xff0c;并在遮罩层上显示图片的说明文字。

使用方法

在页面中引入style.css文件。

HTML结构

该图片hover效果使用下面的HTML结构。

CSS样式

图片hover效果的样式如下&＃xff1a;

.media {

display: inline-block;

position: relative;

vertical-align: top;

}

.media__image { display: block; }

.media__body {

background: rgba(41, 128, 185, 0.7);

bottom: 0;

color: white;

font-size: 1em;

left: 0;

opacity: 0;

overflow: hidden;

padding: 3.75em 3em;

position: absolute;

text-align: center;

top: 0;

right: 0;

-webkit-transition: 0.6s;

transition: 0.6s;

}

.media__body:hover { opacity: 1; }

.media__body:after,

.media__body:before {

border: 1px solid rgba(255, 255, 255, 0.7);

bottom: 1em;

content: &＃39;&＃39;;

left: 1em;

opacity: 0;

position: absolute;

right: 1em;

top: 1em;

-webkit-transform: scale(1.5);

-ms-transform: scale(1.5);

transform: scale(1.5);

-webkit-transition: 0.6s 0.2s;

transition: 0.6s 0.2s;

}

.media__body:before {

border-bottom: none;

border-top: none;

left: 2em;

right: 2em;

}

.media__body:after {

border-left: none;

border-right: none;

bottom: 2em;

top: 2em;

}

.media__body:hover:after,

.media__body:hover:before {

-webkit-transform: scale(1);

-ms-transform: scale(1);

transform: scale(1);

opacity: 1;

}

.media__body h2 { margin-top: 0; }

.media__body p { margin-bottom: 1.5em; }