常用资源整理
公共区
头部区
banner区
底部区
公司简介
图片列表
图文列表
文章列表
视频播放
下载列表
问答列表
招贤纳士
联系我们
图片列表

QQ截图20230601073801

<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);}