<div class="case_list">
<li><a href="">
<div class="pic "><img src=""></div>
<div class="up-graybox">
<p class="stitle">
<span class="line linet"></span>
企业展厅
<span class="line lineb"></span>
</p>
</div>
</a>
</li>
</div>
/*==========首页案例展示模块===============*/
.case_list{}
.case_list li{position:relative; width: 31.3%; margin:10px 1%;border-radius:5px; position:relative;overflow:hidden;}
.case_list li .pic{overflow:hidden;border-radius:3px;}
.case_list li img{width:100%;height:100%; object-fit: cover; display:block; transition:0.3s all; }
.case_list li .txt{font-size:16px; text-align:center; line-height:40px;}
/*-查看详情-*/
.up-graybox{width: 100%;height: 100%; position: absolute;left: 0; top: 0; background:#000; opacity: 0; filter: alpha(opacity=0); transition: all 0.4s ease 0s;}
.up-graybox:hover{background:#000; opacity: 0.6; filter: alpha(opacity=60); transition: all 0.4s ease 0s;}
.up-graybox .stitle {font-size: 14px;line-height: 30px; width: 100%; text-align: center; position: absolute; left: 0; top: 50%; margin-top: -15px;color: #fff;}
.up-graybox .line {display: inline-block; width: 100px;height: 1px;background-color: #f2f2f2; position: absolute; left: 50%;margin-left: -50px; transition: all 0.6s ease 0s;}
.up-graybox .linet { top: 0;}
.up-graybox .lineb { bottom: 0;}
.up-graybox:hover .line { width: 6px; margin-left: -3px; opacity: 0.6;filter: alpha(opacity=60);}