How to make a div that expands and shows hidden content?

Question

I want to make a block that expands down giving party information and events, but I’m having a lot of trouble because I don’t know how to do 2 divare activating at the same time the mouse over.

this is my html code:

<div id="eventos">

<a href="#"><div class="eventos-blocos">
<img src="eventos/a-traidos.jpg" width="250px" height="100px" />
<p align="left">25/02/2014</p><br />
<h3 align="left">A-TRAIDOS</h3>
</div></a>

</div>

And that’s the CSS code:

#eventos{
    width:810px;
    height:500px;
    background:#666;
    float:left;


}

.eventos-blocos{
    width:250px;
    height:100px;
    float:left;
    background-color:#CCC;
    margin:8px;
    border:2px solid #FFF;
    transition:all 700ms;
    -moz-transition:all 700ms;
    -o-transition:all 700ms;
    -webkit-transition:all 700ms;
    position:relative;
    top:0px;
    left:0px;


}

.eventos-blocos:hover{
    border:2px solid #0C9;
    height:150px;


}

.eventos-blocos p{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:10px;
    color:#FFF;
    animation-direction:alternate;
    margin-bottom:-20px;
    margin-left:3px;
    margin-top:3px;
}


.eventos-blocos h3{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:14px;
    color:#FFF;
    margin:3px;


}

When the div is triggered by mouseover to div from the bottom always moves too far, looking like a bug.

Answer 1

I don’t understand very well what you want, but if you want the information to appear when the mouseover is triggered you must put:

**overflow:hidden;**

.eventos-blocos{
width:250px;
height:100px;
float:left;
background-color:#CCC;
margin:8px;
border:2px solid #FFF;
transition:all 700ms;
-moz-transition:all 700ms;
-o-transition:all 700ms;
-webkit-transition:all 700ms;
position:relative;
top:0px;
left:0px;
overflow:hidden;

}