纯CSS实现鼠标停在图片上滑出提示文本的效果

最近突发奇想研究了一下只用CSS实现的滑出提示文本的效果，Chrome上实现的效果可以看下图，鼠标悬停在图片会从图片底部滑出文本，并且有半透明效果。（IE8以下不完全兼容，待改进）

CSS部分代码

.div_top_box{
	width:300px;
	height:300px;
	margin:5px;
	float:left;
	position:relative;
	overflow:hidden;
	}
.div_top_box a{
	width:300px;
	height:300px;
	display:block;
	background-color:#999999;
	z-index:1;	
	}
.div_top_box a img{
	display:block;
	border:0px;
	z-index:2;	
	}
.div_top_box a:hover span{
	bottom:0px;
	-webkit-transition:bottom 0.5s ease;
	transition:bottom 0.5s ease;
	}
.div_top_box a span{
	width:300px;
	height:60px;
	opacity:0.5;
	background-color:#000;
	bottom:-60px;
	position:absolute;
	color:#FFF;
	line-height:60px;
	padding-left:20px;
	padding-right:20px;
	z-index:3;
	}

HTML部分代码

    <div class="div_top_box">
    	<a href="#"><img src=""><span>This is a photo</span></a>
    </div>