css遮罩

最新推荐文章于 2024-08-25 20:15:05 发布

Abenazhan

最新推荐文章于 2024-08-25 20:15:05 发布

阅读量669

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/Abenazhan/article/details/85992739

版权

CSS 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

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