css如何实现鼠标移至图片上显示遮罩层及文字

一张图片当鼠标移动到上方时，会显示一个遮罩层，并且显示一些提示文字

触摸前图片

触摸后图片

 实现方法

/html部分

 <div class="contentimg">
 <span class="img_content">
     <a href="http://www.eltran.cc/" target="view_frame">
     <img src="./assets/img/图片路径.jpg" alt="">                    
     <span class="mask">河北亚创天然气股份有限公司  </span></a>
 </span>
 </div>

/css部分

.contentimg img{
     width: 235px;
     height: 100px;
}
 .contentimg .img_content{
    position: relative;
    padding: 0;
    width: 235px;
    height: 100px;
}
 .contentimg .img_content .mask{
    position: absolute;
    top:-36px;
    left: 0;
    width: 235px;
    height: 100px;
    background: rgba(113, 198, 32, 0.9);
    color:#fff;
    line-height: 100px;
    text-align: center;
    display: none;
}

jQuery部分

$(function(){
  $(".contentimg .img_content").mouseover(function(){          
    $(".img_content .mask").show();
});
  $(".contentimg .img_content").mouseout(function(){
  $(".img_content .mask").hide();
});
});

标签：遮罩,img,100px,层及,height,content,width,contentimg,css
来源： https://www.cnblogs.com/mhyweb/p/15705915.html