CSS Based Image Dropdown

by Drath

HTML

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

CSS

body { padding:50px; background:#111;}

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