Nice looking image hover/caption reveal with JS fallback. After looking at http://mattbango.com/notebook/web-development/hover-zoom-effect-with-jquery-and-css/ I wanted to make my own using only CSS. Decided to opt for the figure and figcaption elements.

index.html

<figure>
  
  <figcaption>
    <p><span>Gibson</span> Les Paul</p>
  </figcaption>
  
  <img src="http://upload.wikimedia.org/wikipedia/commons/9/97/Gibson_Les_Paul_03.jpg" alt="">
  
</figure>

script.js

$( document ).ready( function() {
  
  function cssTransitionFallback() {
    // Queue : false means both animations occur simultaneously 
    $( 'figure' ).hover(
      function() {
        
        $( 'figcaption' ).animate({
          opacity: 1
        }, { duration: 200, queue: false });
        
        $('img').animate({
          'left': '-5px',
          'max-width': '520px'
        }, { duration: 200, queue: false });
      }, 
      function() {

       $('figcaption').animate({
          opacity: 0
        }, { duration: 200, queue: false });
        
        $('img').animate({
          'left': '-20px',
          'max-width': '600px'
        }, { duration: 200, queue: false });
    });
  }
  
  // Only call the function if there's no transition support
  if( !Modernizr.csstransitions ) {
    cssTransitionFallback();
  } 
  
});

style.css

@import url(http://fonts.googleapis.com/css?family=Lobster);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300);

body {
  background-color: #f2f7f4; 
}

figure {
  position: relative;
  top: 30px;
  width: 330px;
  height: 330px;
  overflow: hidden;
  margin: auto;
  -webkit-box-shadow:  0px 3px 15px 0px rgba(0, 0, 0, 0.5);
  box-shadow:  0px 3px 15px 0px rgba(0, 0, 0, 0.5);
}

figure > img {
  max-width: 600px;
  position: relative;
  left: -20px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* With transition support, animate the image */
.csstransitions figure:hover img {
  max-width: 520px; 
  left: -5px;
}

figcaption {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  position: absolute;
  z-index: 9999;
  cursor: default;
  width: 100%;
  height: 100%;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

/* Fade in the caption if there's css support.
 * No javascript support & no css transition
 * support, pop in the caption */
.csstransitions figure:hover > figcaption,
.no-js figure:hover > figcaption {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  opacity: 1;
}

figcaption p {
  position: relative;
  top: 40%;
  color: #fff;
  font-size: 22px;
  font-family: 'Open Sans Condensed', sans-serif;
  text-shadow: 0px 0px 20px #000000;
  filter: dropshadow(color=#000000, offx=0, offy=0);
  
}

figcaption span {
  display: block; 
  font-family: 'Lobster', cursive;
  font-size: 50px;
  margin-bottom: 6px;
}