之前有人问我，这种效果如何做出来，其实这种效果只用css3效果就可以做出来了，代码非常简单。下面我就来说说这个效果如何制作，只需要一个能够支持CSS3的浏览器和一款任意编辑器即可完成。

<div class="content" ><!--包含显示与未显示的整体div-->
        <div class="look"><!--包含鼠标没有移动的内容-->
        鼠标没有触碰的时候显示的内容
        </div>
        <div class="show"><!--包含鼠标移动上去的内容-->
            当鼠标移动到这个块元素的时候，会显示这里
        </div>
    </div>

<style>
        .content{
            width:300px;/*设置需要的宽和高*/
            height:200px;
            position:relative;//设置相对定位
        }
        .look{
            width:100%;/*显示内容与整体相同宽高*/
            height:100%;
            background:green;
        }
        .show{
            background:rgba(0,0,0,0.5);/*使用rgba设置半透明背景*/
            width:300px;/*注意此处必须与整体宽高相同*/
            height:200px;
            position:absolute;/*绝对定位*/
            top:0;/*绝对顶点与左边*/
            left:0;
            opacity:0;/*这里可以设置opacity也可以设置display:none*/
            color:#fff;
            transition:.3s;/*过渡*/
        }
        .content:hover .show{/*当鼠标移动到content类上时候让show类的透明度全显*/
            opacity:1;
        }
    </style>

很简单的一个效果有木有，对了，这个效果仅能在支持CSS3的浏览器中查看、如果用IE9的话是没有过渡效果的。