Do you mean something like this - DEMO?
What I've done is, I've created two classes (.pic
and .text
). .pic
holds the picture and the other class contains the text. The .text
class is positioned at the bottom of .pic
and it has a height
of 0;
To make the text appear when you :hover
over the image I just transition the height of .text
, in this case from 0
to 150px;
Here the code from my demo
HTML
<div class="pic"><img src="http://placekitten.com/200/300" />
<div class="text"><p>This is a cat</p></div>
</div>
CSS
.pic {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
.text {
position: absolute;
bottom: 0;
right: 0;
width: 200px;
height: 0;
text-align: center;
background: rgba(255, 255, 255, 0.7);
transition: height 0.7s ease-out;
}
.pic:hover > .text {
height: 150px;
}