Wie Sie ein div-Element und seinen Inhalt auf hover?

Ich versuche, erstellen Sie ein div, das sich auf schweben, aber kann nicht herausfinden, wie man die Inhalte erweitern mit den div. Ich habe versucht, ein paar overflow-Optionen, aber Sie funktionieren nicht.

CSS:

.grow {
  padding: 5px 5px 5px 5px;
  border-radius:10px;
    height: 50px; 
    width: 22%; 
    margin: 5px 1% 5px 1%; 
    float: left; 
    position: relative; 
    transition:height 0.5s; 
    -webkit-transition:height 0.5s; 
    text-align: center;

}
.grow:hover {
    height: 115px; /* This is the height on hover */
}

HTML:

<div class="grow" style="background-color: #2a75a9;">
    <h2>Title</h2> <br>
    Contrary to popular belief, Lorem Ipsum is not simply random text.  It has roots in a piece of classical Latin literature
</div>

Hier ist die JSFiddle

InformationsquelleAutor Nicole | 2014-12-12
Schreibe einen Kommentar