Expanding <div> Smoothly on Hover with CSS

Resources for a tutorial by Benedict Lewis.

by Benedict Lewis

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<!-- Ignore this <div>, it just displays the information about the turorial. If you find it distracting, feel free to delete it. -->
<div id="info"></div>
<div class="page-header">
    <h3>Expanding &lt;div&gt; <small>With <code>clear: left;</code></small></h3>
</div>
<!-- The code for the tutorial starts here -->
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<div style="clear: left;"></div>
<p>Remember that it is important to add <code>clear: left;</code> to the <code>&lt;div&gt;</code> after the expanding content or your content will wrap strangly as in the demo below:</p>
<div class="page-header">
    <h3>Expanding &lt;div&gt; <small>Without <code>clear: left;</code></small></h3>
</div>
<div class="grow" style="background-color:#2A75A9;"></div>
<div class="grow" style="background-color:#274257;"></div>
<div class="grow" style="background-color:#644436;"></div>
<div class="grow" style="background-color:#8F6048;"></div>
<p>This is some text that will float strangly because there is no clear: left applied. Try to mouseover one of the boxes above.</p>

CSS

.grow {
    height: 100px; /* Origional height */
    width: 22%; /* Origional width */
    margin: 5px 1% 5px 1%; /* Just for presentation (Not required) */
    float: left; /* Just for presentation (Not required) */
    position: relative; /* Just for presentation (Not required) */
    transition:height 0.5s; /* Animation time */
    -webkit-transition:height 0.5s; /* For Safari */
}
.grow:hover {
    height: 115px; /* This is the height on hover */
}

JavaScript

// Ignore everything below this, this is just the code that formats the message box above the tutorial resources. You do not need any of this. In fact, if you find it distracting you can delete all of it.

var tutorialName = "Expanding &lt;div&gt; Smoothly on Hover with CSS";
var tutorialURL = "http://www.justcode.us/2013/05/expanding-smoothly-on-hover-with-css";
var tutorialAuthor = "Benedict Lewis";
var authorURL = "http://justcode.us";

$('#info').html("<div class=\"well\" style=\"margin-top:20px;\"><h4>"+ tutorialName +"</h4><h5>Resources for a tutorial by <a href=\""+ authorURL + "\">"+ tutorialAuthor +"</a></h5><div class=\"alert\"><button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button><strong>Warning:</strong> These are just resources for a tutorial. To find out how to use this code please read <a href=\""+ tutorialURL +"\" target=\"_blank\">my tutorial</a> over at <a href=\"http://justcode.us\" target=\"_blank\">The Dev Blog</a>.</div></div>");