css3实现一个动画效果，鼠标移入画面向上移动

网页初始状态（附图）：

网页最后状态（附图）：

下面是css代码：

 .a{
		width: 300px;
		height: 300px;
		overflow: hidden;
		position: relative;
		background-color: aqua;
	}
	.b{
		width: 300px;
		height: 320px;
		background:rgba(114,111,111,0.4);
		text-align: center;
		transition: 0.3s;
		position: absolute;
		margin-top: 254px;
		top: 1px;
		z-index: 9999;
	}
	.a :hover.b{
		opacity: 1;
		transition: 0.3s;
		margin-top: -3px;
		font-size: 18px;
	}

html部分：

<div class="a"><img src="img/tu.jpg"><div class="b">小女孩</div></div>

最后附言：最关键的是最下面那行，是借助设置文字的高度然后用margin-top负值来控制。