Html
    Css
    Js

    
                        
body,div,li,p,ul {
	margin:0;
	padding:0;
	font-size:14px;
	font-family:"Microsoft Yahei","微软雅黑",sans-serif;
}
.clearfix::after {
	clear:both;
	display:block;
	height:0;
	content:'';
}
li,ul {
	list-style:none;
}
#container {
	margin:0 auto;
	width:100%;
}
#container li {
	position:relative;
	float:left;
	overflow:hidden;
	margin:1%;
	width:30%;
	height:160px;
	border:1px solid #ccc;
	text-align:center;
	line-height:160px;
	cursor:pointer;
}
#container li img {
	width:100%;
}
#container li p {
	position:absolute;
	top:-160px;
	left:0;
	z-index:2;
	width:100%;
	height:160px;
	color:#fff;
}
#container li .img {
	display:block;
	width:100%;
	height:160px;
	-webkit-transition:.5s ease-in;
	-moz-transition:.5s ease-in;
	-o-transition:.5s ease-in;
	transition:.5s ease-in;
	-ms-transition:.5s ease-in;
}
#container li:nth-child(1) .img {
	background-color:#E97305;
}
#container li:nth-child(2) .img {
	background-color:#FFAAAA;
}
#container li:nth-child(3) .img {
	background-color:#FFFF00;
}
#container li:nth-child(4) .img {
	background-color:aqua;
}
#container li:nth-child(5) .img {
	background-color:blueviolet;
}
#container li:nth-child(6) .img {
	background-color:cadetblue
}
#container li:hover .img {
	-webkit-transform:scale(1.1,1.1);
	-moz-transform:scale(1.1,1.1);
	-o-transform:scale(1.1,1.1);
	transform:scale(1.1,1.1);
}
#container li p i {
	position:absolute;
	top:0;
	left:0;
	z-index:-1;
	display:block;
	width:100%;
	height:100%;
	background:#000;
	font-size:16px;
	opacity:.7;
	-moz-opacity:.7;
	filter:alpha(opacity=70);
}
#container li p span {
	display:block;
	margin:0 auto;
	padding-top:60px;
	width:94%;
	font-size:12px;
	line-height:24px;
}
#container li p a {
	position:absolute;
	top:20px;
	left:50%;
	display:block;
	margin-left:-16px;
	width:32px;
	height:32px;
	background:url(https://www.jq22.com/tp/6375197141508666897222181.png) no-repeat 0 0;
}
.explain {
	display:block;
	margin:0 auto;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

jQuery鼠标划入出现遮罩层动画

更新时间:2021-03-22 00:59:07

背景色页可换成图片,只需将li下面的div换成img即可,可直接复用div的class样式。li中a标签可添加自己所需的链接地址。

0