CSS Based Image Dropdown

August 25th, 2012

I was inspired by a recent Steam community page preview where a long image was cropped, but upon mouse hover, it expanded down. It seems like their implementation was using JavaScript; however, I knew I could do this without JavaScript and with some added graphical style for good measure.

Demo

Code

HTML

<div class="imagedrop"><img src="http://vaughnroyko.com/jsfiddle/avatar.png" alt="" /></div>

CSS

.imagedrop {
    width:180px;
    height:60px;
    overflow:hidden;
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    box-shadow:none;
    border:1px #111 solid;
    position:absolute;
    z-index:100;
}

.imagedrop:hover {
    height:174px;
    box-shadow:0 0 30px #7caeff;
    border:1px #7caeff solid;
}