图片遮罩效果

小咪咪 2024-04-18 16:53 83阅读 0赞

> 欢迎访问我的博客地址 : [博客地址][Link 1]

**鼠标移入容器半遮罩层从下方逐渐移上去**

话不多说，直接上代码!

<!DOCTYPE html><html><head>
      <meta charset="UTF-8"><title></title>
        <style>
        body{
          margin:0;padding:0;}
        .content{
          
          width:1000px;
          margin:100px auto;
          display:flex;
          justify-content:space-around;
        }
        .z-main{
          
          width:300px;
          height:300px;
          overflow:hidden;margin:auto;
          position:relative;
        }
        .z-text{
          
          width:100%;
          position:absolute;
          background-color:rgba(0,0,0,0.7);
          text-align: center;
          color:white;
        }		
        </style></head><body>
          <div class="content">
            <div class="z-main">
              <a href=""><img src='https://cdn.jsdelivr.net/gh/quinhua/pics@main/blog/1.2c4rop9xljk0.webp' alt=""></a>
              <div class="z-text">
                <b>China</b>
                <p>If we encounter a man of rare intellect, we should ask him what books he reads.</p>
              </div>
            </div>
            <div class="z-main">
              <a href=""><img src='https://cdn.jsdelivr.net/gh/quinhua/pics@main/blog/image.6ad3e3vc3780.jpg' alt=""></a>
              <div class="z-text">
                <b>China</b>
                <p>If we encounter a man of rare intellect, we should ask him what books he reads.</p>
              </div>
            </div>
            <div class="z-main">
              <a href=""><img src='https://cdn.jsdelivr.net/gh/quinhua/pics@main/blog/image.6ylux8fqul4.jpg' alt=""></a>
              <div class="z-text">
                <b>China</b>
                <p>If we encounter a man of rare intellect, we should ask him what books he reads.</p>
              </div>
            </div>
          </div>
          <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <script>
          $(function(){
          
            var oBigh=$('.z-main').height();
            var oBigw=$('.z-main').width();
            var oSmah=$('.z-text').height();
            var oSmaw=$('.z-text').width();
            var oW=oBigh-oSmah;
            var oThree=(1/3)*oBigh;
            $('.z-main img').css({
          'width':oBigw,'height':oBigh});
            $('.ztext').css({
          'height':oThree})
            function boxz(zmain,ztext){
          
                    $(zmain).hover(function(){
          
                        $(this).find(ztext).stop().animate({
          'top':oW});
                      
                    },function(){
          
                      $(this).find(ztext).stop().animate({
          'top':oBigh});
                    },)
      
                }	
            boxz('.z-main','.z-text');	
          })
        </script>
        </body></html>

效果如下：![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjk5MTIy_size_16_color_FFFFFF_t_70]

[Link 1]: http://qianhuine.top:8090/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjk5MTIy_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/88959ada95ab44d2b3444b7fdcccd764.png