如何实现当鼠标离开黑色区域的时候黑色部分消失，这种效果啊

怎么实现当鼠标离开黑色区域的时候黑色部分消失，这种效果啊？
代码部分：

        <div class="box">
<div class="picture">
<p class="del"><img style="margin-top:5px;" src="img/trash.png" /></p>
<p class="slideimg" ><img style="width: 200px;" src="../uploads/01.jpg" /></p>
</div>
<div class="picture">
<p class="del"><img style="margin-top:5px;" src="img/trash.png" /></p>
<p class="slideimg"><img style="width: 200px;" src="../uploads/01.jpg" /></p>
</div>
<div class="picture">
<p class="del"><img style="margin-top:5px;" src="img/trash.png" /></p>
<p class="slideimg"><img style="width: 200px;" src="../uploads/01.jpg" /></p>
</div>
<div class="picture">
<p class="del"><img style="margin-top:5px;" src="img/trash.png" /></p>
<p class="slideimg"><img style="width: 200px;" src="../uploads/01.jpg" /></p>
</div>
</div>

        <script>
             var o;
             $('p').mouseover(function () {
            o = $(this).prev();
            o.fadeIn();
             });
        </script>
图片部分：



------解决思路----------------------
看看我弄的效果，图片用的是下面的那个，宽度和高度都是200px，如果换成你的图片的话，最好改下.picture的属性
阴影是用CSS实现的，不是用图片。

<style type="text/css">

    *{margin: 0; padding:0;}

    .picture{width: 200px; height: 200px;position: relative; margin-top: 10px;}

    .picture .del{position: absolute;}

    .picture .lay{position: absolute;width: 200px;height: 40px;background-color: #000;bottom: 0;filter: alpha(Opacity=60);opacity: .6; display: none; cursor: pointer;}

</style>

<div class="box">

    <div class="picture">

        <p class="del">

            <img src="./common/images/01.jpg"/>

        </p>

        <p class="lay"></p>

    </div>

    <div class="picture">

        <p class="del">

            <img src="./common/images/01.jpg"/>

        </p>

        <p class="lay"></p>

    </div>

    <div class="picture">

        <p class="del">

            <img src="./common/images/01.jpg"/>

        </p>

        <p class="lay"></p>

    </div>

    <div class="picture">

        <p class="del">

            <img src="./common/images/01.jpg"/>

        </p>

        <p class="lay"></p>

    </div>


</div>

<script type="text/javascript" src="./common/jquery-1.11.1.min.js"></script>

<script>

    $(".picture").hover(function(){

        var $lay = $(this).find(".lay");

        $lay.stop(false, true).fadeIn();

    }, function(){

        var $lay = $(this).find(".lay");

        $lay.stop(false, true).fadeOut();

    });

</script>