鼠标放上图片滤镜效果
一、HTML代码
<!doctype html>
<html lang="zh-CN">
<head>
<link href="1.css" rel="stylesheet">
</head>
<body>
<div class="iproduct-area clearfix">
<ul class="iproduct-list">
<li>
<a href="/products/sffs/fqfyfs/">
<p>工业废弃物焚烧处置系统</p>
<img src="iproduct_5.jpg" alt="工业废弃物焚烧处置系统" width="51%" height="53%">
</a>
</li>
<li>
<a href="/products/yrhs/yrbrhsly/">
<p class="text-mid">余热回收利用系统</p>
<img src="iproduct_6.jpg" alt="余热回收利用系统">
</a>
</li>
<li class="last">
<a href="/services/performance//">
<p>工程案例</p>
<img src="iproduct_7.jpg" alt="工程案例">
</a>
</li>
</ul>
</div>
</body>
</html>
二、CSS样式表
.iproduct-area {
display:block;
width:100%;
margin-bottom:70px
}
.iproduct-list li {
display:inline-block;
float:left;
height:200px;
width:32.6666%;
text-align:center;
margin-right:1%;
position:relative;
overflow:hidden
}
.iproduct-list li a {
display:block;
height:100%;
width:100%
}
.iproduct-list li a:after {
display:block;
content:"";
height:100%;
width:100%;
background:rgba(114,175,38,0.7);
position:absolute;
left:0;
top:0;
z-index:2;
opacity:0;
transition:opacity 0.3s ease-out
}
.iproduct-list li p {
display:block;
float:left;
font-size:30px;
height:35px;
text-align:center;
white-space:nowrap;
padding-bottom:5px;
position:absolute;
left:50%;
top:50%;
margin-top:-20px;
z-index:3;
color:#fff;
border-bottom:1px solid rgba(255,255,255,0);
transform:translate(-50%,0);
transition:border-bottom 0.3s ease-out;
-webkit-transition:width 1s linear
}
.iproduct-list li p:after {
content:' ';
width:0;
height:2px;
background:#fff;
bottom:-2px;
left:0;
position:absolute;
opacity:0;
-webkit-transition:all 0.2s linear
}
.iproduct-list li img {
display:block;
height:100%;
width:100%;
position:absolute;
left:0;
top:0;
z-index:1;
transform:scale(1);
transition:transform 0.3s ease-out
}
.iproduct-list li.last {
margin-right:0
}
.iproduct-list li a:hover:after {
opacity:1
}
.iproduct-list li a:hover p:after {
opacity:1;
left:0;
width:100%
}
.iproduct-list li a:hover img {
transform:scale(1.024)
}
@media (max-width:767px) {
.iproduct-area {
margin-bottom:10px
}
.iproduct-list li {
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
width:48%;
height:100px
}
.iproduct-list li:nth-of-type(odd) {
margin-right:3%
}
.iproduct-list li p {
width:80%;
font-size:20px;
margin-top:-15px;
white-space:inherit
}
.iproduct-list li p.text-mid {
margin-top:-30px
}
.iproduct-list li p:after {
height:0
}
.iproduct-list li.last {
display:none;
height:0
}
}@media screen and (min-width:768px) and (max-width:991px) {
.iproduct-list {
margin-bottom:20px
}
.iproduct-list li {
height:130px
}
.iproduct-list li p {
width:60%;
font-size:20px
}
}@media screen and (min-width:992px) and (max-width:1199px) {
.iproduct-list {
margin-bottom:20px
}
.iproduct-list li {
height:150px
}
.iproduct-list li p {
font-size:20px
}
}@media screen and (min-width:1200px) and (max-width:1599px) {
.iproduct-list li p {
font-size:24px
}
}@media screen and (min-width:1600px) {
.iproduct-list li p {
height:45px
}