Текст на картинке (CSS3)

*.html
<div class="div">
<span
class="img">
<imgsrc="images/
Hight_School.png"/
>
<span
class="text">
Ваштекст!
</span>
</span>
</div>
*.css
.div{
border-top:1px
solid#777;
text-align:
center;
padding:10px;
}
.text{
overflow:hidden;
display:block;
position:
absolute;
margin-top:3px;
bottom:3px;
left:0;
width:100%;
height:98%;
box-sizing:
border-box;
color:#FFF;
text-align:left;
padding:5px
10px;
opacity:0;
transition:
all.2sease-in-
out;
-webkit-
transition:
all.2sease-in-
out;
-moz-transition:
all.2sease-in-
out;
}
.text:hover{
background-color:
rgba(0,0,
0,.9);
opacity:1;
}
.img{
display:inline-
block;
position:
relative;
}