Animate div content with div's animation in CSS3 or JS

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