使用CSS3或JS中的div动画对div内容进行动画处理

Question

Here is the jsfiddle: http://jsfiddle.net/kimimsc/LEjBR/

<section id="portfolioContent" class="blueTheme">
<div class="container mmContainer">
    <div class="pullLeft portfolioVignette">
        <div class="portfolioVignetteFilter">
            <p>Test1</p>
        </div>
    </div>
</div>

#portfolioContent {}
.portfolioVignette {background-color: gold; width: 500px; height: 300px; border-radius: 20px; margin: 20px;}
.portfolioVignette > .portfolioVignetteFilter {height: 300px; width:0px; border-radius: 20px; background-color: rgba(204,204,204,0.5); -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}
.portfolioVignette:hover > .portfolioVignetteFilter {height: 300px; width: 500px; border-radius: 20px; background-color: rgba(204,204,204,0.5);  -webkit-transition: width 0.5s ease-out; -moz-transition: width 0.5s ease-out; -o-transition: width 0.5s ease-out; transition: width 0.5s ease-out;}

So first of all, if you look at the jsfiddle that I provided you will see what I've done.

Bascily I have a div (in yellow) and I am using css3 transition to animate the width change on another div (grey with 0.5 alpha). The grey div appears over the yellow on hover and disappears when the hover action is over. You can also see that there is a text element 'Test1' that is always displayed.

So what I want to do is when there is no hover I would like to have only the yellow element without anything else (so no text aswell) and on hover I would like the text to come with the grey element.

I don't think this is the right way to do it but I couldn't find anything that could help me.

If I haven't been clear enough. tell me if you have any questions.

Thank you for your help guys,

Answer 1

Something like this should do it:

.portfolioVignette p {
    width: 0;
    overflow: hidden;
    transition: width 0.5s ease-out;
}

.portfolioVignette:hover p {
    width: 100%;    
}

See it here: http://jsfiddle.net/shomz/LEjBR/6/

Answer 2

I did something similar, but interpreted your problem a little differently:

.portfolioVignette p {
 width:0;
 margin-left:0;
 overflow: hidden;
 transition: width .5s ease-out;
 transition: margin-left .5s ease-out;
}

.portfolioVignette:hover p {
 width:100%;
 margin-left:90%;
}