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.




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


.imagedrop {
    transition:all 0.3s ease;
    -moz-transition:all 0.3s ease;
    -webkit-transition:all 0.3s ease;
    -o-transition:all 0.3s ease;
    border:1px #111 solid;

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

This entry was posted in Blog and tagged , .

Leave a Reply



This site uses Akismet to reduce spam. Learn how your comment data is processed.