炫酷蒙层效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>杂志订阅</title>
<style>
*{margin: 0;padding: 0px;list-style: none;}
.block_box{width: 1200px;margin: 0 auto;}
.block_box ul{float: left;}
.block_box ul li{float: left;width: 25%;position: relative;overflow: hidden;}
.block_box ul li:hover .title{display: block;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.block_box ul li:hover .title span{display: block; color: #fff;}
.block_box ul li:hover img{
transform: scale(1.2,1.2); -webkit-transform: scale(1.2,1.2);
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-ms-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
}
.block_box ul li img{width: 100%;height: 400px;}
.title{position: absolute;top: 0;left: 0px;width: 100%;text-align: center;background: rgba(255, 66, 41, 0.9);height: 404px;display: none;}
.title span{position: absolute;top:120px;left:0;display: none;width: 100%;}
</style>
</head>
<body>
<div class="block_box">
<ul>
<li>
<img src="./img/feng_01.jpeg" alt="">
<div class="title">
<span>我的小峰峰</span>
</div>
</li>
<li>
<img src="./img/feng_02.jpeg" alt="">
<div class="title">
<span>我的小峰峰</span>
</div>
</li>
<li>
<img src="./img/feng_03.jpeg" alt="">
<div class="title">
<span>我的小峰峰</span>
</div>
</li>
<li>
<img src="./img/feng_04.jpeg" alt="">
<div class="title">
<span>我的小峰峰</span>
</div>
</li>
</ul>
</div>
</body>
</html>
