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();
});
});