版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Abenazhan/article/details/85992739
<div class="cp">
<ul class="cp1">
{zso:prolist (row='6' parentid='69')}
<a href="[arcurl]" >
<li class="cp2">
<img src="[path]" class="di"/>
<div class="di1">
<p>
<span class="kuang">[productname]</span>
<span class="kuang1"></span>
<span class="kuang2">Main Business</span>
</p>
</div>
<div class="heng">
[productname]
</div>
</li>
</a>
{/zso:prolist}
</ul>
</div>
css:
.ccp{width:100%;margin-top:50px;}
.ccp1{font-size:50px;color:#000000;text-align:center;}
.ccp2{font-size:30px;color:#363636;text-align:center;}
.cp{width:100%;height:auto;margin-top:50px;}
.cp1{list-style:none;width:95%;margin:0 auto;}
.cp2{list-style:none;width:33%;height:450px;float:left;position: relative;}
.di{display:block;width:100%;position:absolute;height:450px;z-index: 100;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.di1{width:100%;height:0px;position:absolute;bottom:0%;left:0px;background-color:rgba(0,0,0,0.4);z-index:400;opacity: 0;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.di:hover + .di1{width:100%;height:450px;opacity: 1;top:0px;left:0px;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.cp2:hover + .di1{width:100%;height:450px;opacity: 1;top:0px;left:0px;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.di1:hover{width:100%;height:450px;opacity: 1;top:0px;left:0px;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.di1 p{width:75%;height:200px;border:1px solid #ffffff;margin:0 auto;text-align:center;margin-top:75px;padding-top:105px;}
.kuang{font-size:28px;font-weight:bold;text-align:center;color:#ffffff;}
.kuang1{display:block;width:80%;margin:0 auto;height:1px;background: #ffffff;margin-top:25px;margin-bottom:10px;}
.kuang2{font-size:22px;text-align:center;margin-top:5px;color:#ffffff;}
.heng{position:absolute;bottom:0px;width:100%;height:80px;line-height:100px;color:#ffffff;background: -webkit-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7)); background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0.7) 100%); background: -ms-linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.7));z-index: 300;font-size:25px;}
.di:hover + .heng{opacity: 0;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.cp2:hover + .heng{opacity: 0;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
.di1:hover +.heng{opacity: 0;transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;}
从底部到顶部延伸的遮罩:bottom:0%;left:0px;width:100%;height:0px;
从中间弹出遮罩:top50%;left:50%;width:0px;height:0px;
使用透明度做显示隐藏:opacity: 0;
过渡效果:transition: all 0.4s linear 0.1s;-moz-transition:all 0.4s linear 0.1s;-webkit-transition:all 0.4s linear 0.1s;-o-transition:all 0.4s linear 0.1s;
背景颜色透明,文字不透明:background-color:rgba(0,0,0,0.4);