css遮罩

版权声明：本文为博主原创文章，未经博主允许不得转载。 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">
          &nbsp;&nbsp;&nbsp;&nbsp;
          [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);