css遮罩

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Abenazhan/article/details/85992739
    <div>
  <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: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);

 

没有更多推荐了,返回首页