<style type="text/css">
  /* --- viewport 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;
  }

  /* --- Light hover background ----------------------------------------------------------- */
  .light-background {
  background-color: rgba(255, 255, 255, 0.6);
  color: #333;
  text-shadow: #fff 0px 0px 20px;
  }
  .light-background em {
  color: #707070;
  }

  /**
  * You could create multiple hover background classes for different looks depending on the
  * image type. Use your imagination!
  */
  </style>

  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript">
  $(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);
  });
  });
  </script>

<div class="viewport">
  <a href="http://www.flickr.com/photos/matt_bango/3479048548/">
  <span class="dark-background">Northern Saw-whet Owl <em>Photo by Matt Bango</em></span>
  <img src="http://farm4.static.flickr.com/3641/3479048548_e58742bd46.jpg" alt="Northern Saw-Whet Owl" />
  </a>
  </div>

  <div class="viewport no-margin">
  <a href="http://www.flickr.com/photos/matt_bango/3478879694/">
  <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="http://www.flickr.com/photos/matt_bango/3478189088/">
  <span class="light-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="http://www.flickr.com/photos/matt_bango/3486648997/">
  <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>