CSS3 Animation multiple hover - html

Question

I have 2 divs. When I hover the mouse over one div it expands changing the height. I want to make it display a text with fade in effect somewhere in the screen when I hover the mouse over that div and finally when I click on the div, I want to display another div or text somewhere in the screen again. This is the code I've created so far.
<style>
#container
{
width:212px;
position:fixed;
left:42.5%;
top:21.7%;
border: 0px solid red;
overflow: hidden;
}
#first
{
background-color:#fff;
width:67px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
}
#first:hover
{
height:354px;
}
#second
{
background-color:#fff;
width:45px;
height:212px;
-webkit-transition:all 1s, -webkit-transform 1s; /* For Safari 3.1 to 6.0 */
-moz-transition:all 1s, -webkit-transform 1s;
-ms-transition:all 1s, -webkit-transform 1s;
-o-transition:all 1s, -webkit-transform 1s;
transition:all 1s, -webkit-transform 1s;
transition:all 1s, transform 1s;
float:left;
margin-left:15px;
}
#second:hover
{
height:354px;
}
</style>
<div id="container">
<div id="first"></div>
<div id="second"></div>
</div>
Any ides ? :/

Answer 1

Do you mean something like this?
http://jsfiddle.net/vLz3c/1/
I've created a pargraph inside the #second element, and made that show up while you hover the #second element.
It also increases the height.
EDIT:
http://jsfiddle.net/vLz3c/2/
Now i have used the jQuery function fadeIn when hovering the #second box.
EDIT 2:
http://jsfiddle.net/vLz3c/3/
Now the paragraph also fades out, when you move your mouse away from the #second box
EDIT: 3
As promised, when you click the #second element, the #third element fades in.
http://jsfiddle.net/vLz3c/4/