css遮罩

    

  

        

         {zso:prolist (row='6' parentid='69')}
          
          

           

              

                

                  [productname]
                  
                  Main Business
                
              

          

              
          [productname]
           
            
          
          
          {/zso:prolist} 
        

css：

.ccp{width:100%;margin-top:50px;}
.ccp1{font-size:30px;color:#000000;text-align:center;}
.ccp2{font-size:16px;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:350px;float:left;position: relative;}

.di{display:block;width:100%;position:absolute;height:350px;z-index: 100;}
.di1{width:100%;height:0px;position:absolute;top:100%;left:0px;background-color:rgba(0,0,0,0.4);z-index:10;opacity: 0;}
.di:hover + .di1{width:100%;height:350px;opacity: 1;top:0px;left:0px;z-index:400;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:350px;opacity: 1;top:0px;left:0px;z-index:400;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:350px;opacity: 1;top:0px;left:0px;z-index:400;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:150px;border:1px solid #ffffff;margin:0 auto;text-align:center;margin-top:75px;padding-top:65px;}
.di1 p:hover + .di1{width:100%;height:350px;opacity: 1;top:0px;left:0px;z-index:400;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;}
.kuang{font-size:20px;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:14px;text-align:center;margin-top:5px;color:#ffffff;}

从底部到顶部延伸的遮罩：top:100%;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);