Slilding Down with CSS

A simple CSS slide-down effect that happens on hover.

by mlms13

HTML

<div id="outer">
    <div id="inner">
        <p>This is text inside the inner div.</p>
    </div>
</div>

CSS

body {
    background: #eee;
    padding: 40px;
}
#outer {
    background: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    width: 30%;
}
#inner {
    border: 1px solid #ccc;
    height: 0;
    overflow: hidden;
    padding: 0 20px;
    -webkit-transition: all 500ms;
}
#inner p {
    margin: 14px 0;
}
#outer:hover #inner {
    height: 80px;
    -webkit-transition: all 500ms;
}