css鼠标触摸实现过渡效果.........

图片说明

最开始图片是这样的

图片说明

鼠标触摸上去右边来了一张比较大的图片

图片说明

这个效果是鼠标触摸在小图片上右边出现一张大图并且小图片从上到下会有一个灰色的背景从上到下慢慢出来的过渡效果问题就是这请大佬给予详细代码我粘贴复制到开发工具中看效果谢谢！

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <style>
        #img1{
            width:50px;
            height: 50px;
        }
        #mask{
            width: 50px;
            height: 50px;
            background: rgba(0,0,0,0.7);
            text-align: center;
            line-height: 50px;
            color: white;
            position: absolute;
            display: none;
        }

        #img2{
            width: 200px;
            height: 200px;
        }
        #div2{
            display: none;
        }
    </style>
    <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    <body>
        <div id="div1">
            <div id="mask">id:128</div>
            <img id="img1" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
        </div>
        <div id="div2">
            <img id="img2" class="img2" src="http://img5.duitang.com/uploads/item/201411/17/20141117214405_GESiY.jpeg"  />
        </div>

    </body>
    <script>
        $(function(){
            $("#img1").mouseover(function(){
                $("#mask").slideDown("slow");
                $("#div2").css("display","block");
            });
            $("#mask").mouseout(function(){
                $("#mask").slideUp("slow");
                $("#div2").css("display","none");
            });
        })
    </script>
</html>