1、将遮罩层html代码与图片放在一个div  我是放在 .demo_div里。

<div class="demo_div">
    <img src="/images/img.jpg"><!--图片-->
    <div class="corving"></div><!--遮罩层-->
</div>

2、css:为图片及遮罩层添加样式  图片：relative 遮罩层：absolute  使两者样式重合。

.demo_div {
    margin: 20px 400px 0 400px;
    position: relative;
    width: 260px;
    height: 150px;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 260px;
    height: 150px;
    background: #000;
    opacity: 0.7;
    display:none;
}

3、js

$(".demo_div").hover(function(){
        $(".mask").show();
    },function(){
        $(".mask").hide();
    });

实现效果：