css+div 控件重叠，子控件隐藏

汤米粥

已于 2024-06-21 23:30:08 修改

阅读量115

点赞数 3

文章标签： css

于 2024-06-21 22:59:20 首次发布

本文链接：https://blog.csdn.net/nnmmbb/article/details/139871598

版权

https://blog.51cto.com/u_16281588/9721961

 <div  class = "list-image-parent" >

                          <img class="img2" :src="image.img">

                          <div class = "mask">{{ image.desc }}</div>

     </div>

 .list-image-parent{



      height: 200px;

      margin-bottom: 15px;



      /**重要！！！！ */

      position: relative; /* 相对定位 */

      overflow: hidden;   /**子控件超出隐藏 */



    }



    .list-image-parent:hover .mask{



      top:50%;

        /* 添加过渡 */

      transition: all 0.5s ease-out;

     

    }



  .img2{

    width: 100%;

    height: 200px;;

    object-fit:cover;

    border-radius:5px;

  }





   .mask{

    position: absolute;

    top: 100%;

    height: 50%; /* 子控件高度与父控件相同 */

    width: 100% - 30px;

    padding-left: 15px;

    padding-right: 15px;

    display: flex;

    justify-content: center;

   

    opacity: 0.9;

    color: white;

    display: flex;



    align-items: center;  

    flex-direction: column;



    padding-left: 10px;

    padding-right: 10px;



    background: #000000;



    border-radius: 0px 0px 8px 8px;



     /* 添加过渡 */

     transition: all 0.5s ease-in;

  }