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

Question

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

Navigation

#1 by (0 votes)

0

I want to make a block that expands down giving party information and events, but I'm having a lot of trouble, because I do not know how to make 2 div s activate mouse over at the same time. / p>

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 div is triggered by mouseover the div below always goes too far, looking like a bug.

html css

asked by anonymous 30.09.2014 / 19:17

1 answer

JBoss for during JSF 1.2 initialization after project conversion to Maven CakePHP indicates that PHPUnit is not installed

score 0 · Accepted Answer

I do not quite understand what you want, but if you want the information to appear when the mouseover is triggered you should 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;

}