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

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: 其中要注意的是img_content样式里定义了position: relative;这个主要是为了让我们的遮罩层做绝对定位做准备的。

.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;
}

• js：这里使用jQuery。首先一定要引入jQuery.js

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

• 效果：鼠标hover至图片上面显示遮罩层及文字。
  鼠标hover前：
  
  鼠标hover后：