为图片添加遮罩层，并在鼠标悬停时切换遮罩层 css

效果图需求：

第一层遮罩层，背景色带文字

第二层遮罩层，隐藏，鼠标悬停时切换隐藏状态，并把第一层遮罩层隐藏

html结构：

 

     

    
     

         

         

              植物医生
              DR PLANT
         
     


    
     

         

         

             植物医生基于有戏为其搭建的数字化门店运营平台，深入挖掘门店价值，打造以数字门店为核心的全渠道、一体化零售运营模式。成功建立的业务数据互通的有机整体，也帮助植物医生高效制定经营决策。
         
      
 

 

css样式

.imgItem {
     position: relative;
     width: 23%;
     height: 300px;
}


img {
     display: block;
     width: 100%;
     height: 100%;
     border-radius: 2%;
     object-fit: cover;
}

/* object-fit: cover; 图片放大中间部分*/


/*第一层遮罩层,定位到Img上*/
 .mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     border-radius: 2%;
  }
/*遮罩层下的元素宽高都要设置100%*/
/*背景色部分*/
.mask-bg {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: #000;
     opacity: .3;
     border-radius: 2%;
}
/*文字部分*/
.mask-content {
     position: absolute;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     width: 100%;
     height: 100%;
     color: #fff;
     font-size: 30px;
     letter-spacing: 8px;
}

/*第二层遮罩层  默认隐藏*/
/*背景色部分*/
.mask-bg-blue {
     position: absolute;
     width: 100%;
     height: 100%;
     background-color: rgb(30, 81, 107);
     border-radius: 2%;
     opacity: .9;
     display: none;
}
/*文字部分*/
 .mask-contents {
     position: absolute;        
     width: 100%;
     height: 100%;
     color: #fff;
     text-align: center;
     padding: 0 20px;
     line-height: 21px;
     vertical-align: middle;
     display: none;
}


/当鼠标悬停的时候，切换遮罩层/
/*隐藏第一个遮罩层，显示第二层*/
 .imgItem:hover .mask-bg {
     display: none;
 }

 .imgItem:hover .mask-content {
     display: none;
 }

 .imgItem:hover .mask-bg-blue {
     display: block;
  }

 .imgItem:hover .mask-contents {
     display: block;
 }