<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.pack.js"></script> <div class="wrap-thin demo-thin"> <div class="viewport"> <a href="#"> <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3471/3959900087_48d1107093.jpg" alt="Northern Saw-Whet Owl" /> </a> </div> <div class="viewport no-margin"> <a href="#"> <span class="dark-background">Red-shouldered Hawk <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3645/3478879694_029e078d4d.jpg" alt="Red-shouldered Hawk" /> </a> </div> <div class="viewport"> <a href="#"> <span class="dark-background">Blue-headed Vireo <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3578/3478189088_1d0503acb1.jpg" alt="Blue-headed Vireo" /> </a> </div> <div class="viewport no-margin"> <a href="#"> <span class="dark-background">Wood Thrush <em>Photo by Matt Bango</em></span> <img src="http://farm4.static.flickr.com/3630/3486648997_b50b7670d1.jpg" alt="Wood Thrush" /> </a> </div> </div>

body { font-family: 'Helvetica Neue', Helvetica, Arial, serif; font-size: 62.5%; margin: 0; padding: 0; } .wrap-thin { margin: 0 auto; width: 921px; } .demo-thin { margin-top: 15px; } a { text-decoration: none; } /* --- Container configuration ---------------------------------------------------------- */ .viewport { border: 3px solid #eee; float: left; height: 299px; margin: 0 9px 9px 0; overflow: hidden; position: relative; width: 450px; } /* This is so that the 2nd thumbnail in each row fits snugly. You will want to add a similar class to the last thumbnail in each row to get rid of the margin-right. */ .no-margin { margin-right: 0; } /* --- Link configuration that contains the image and label ----------------------------- */ .viewport a { display: block; position: relative; } .viewport a img { height: 332px; left: -20px; position: relative; top: -20px; width: 500px; } /* --- Label configuration -------------------------------------------------------------- */ .viewport a span { display: none; font-size: 3.0em; font-weight: bold; height: 100%; padding-top: 120px; position: absolute; text-align: center; text-decoration: none; width: 100%; z-index: 100; } .viewport a span em { display: block; font-size: 0.45em; font-weight: normal; } /* --- Dark hover background ------------------------------------------------------------ */ .dark-background { background-color: rgba(15, 15, 15, 0.6); color: #fff; text-shadow: #000 0px 0px 20px; } .dark-background em { color: #ccc; }

$(document).ready(function() { $('.viewport').mouseenter(function(e) { $(this).children('a').children('img').animate({ height: '299', left: '0', top: '0', width: '450'}, 100); $(this).children('a').children('span').fadeIn(200); }).mouseleave(function(e) { $(this).children('a').children('img').animate({ height: '332', left: '-20', top: '-20', width: '500'}, 100); $(this).children('a').children('span').fadeOut(200); }); });