Text over image using CSS transitions

Question

I am an illustrator making a portfolio site. I'm trying to simply create a rollover css transition with Dreamweaver. I would like it so when you roll over the image the text will rise up to give a description about the image.

Answer 1

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;
}