JSFiddle - React, Tailwind, and code Playground

HTML

<div id="eventos">
    <a href="#">
        <div class="eventos-blocos">
            <img src="http://placehold.it/250x100/FFFFFF/333333&text=Imagem" width="250px" height="100px" />
            <p align="left">25/02/2014</p><br />
            <h3 align="left">A-TRAIDOS</h3>
        </div>
    </a>
</div>

CSS

#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;
    overflow:hidden;

}

.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;


}