CodePen

HTML

            
              <div class="grid">
  <img src="http://placekitten.com/150/150" rel="first-caption" alt="">
  <img src="http://placekitten.com/150/150" rel="second-caption" alt="">
  <img src="http://placekitten.com/150/150" rel="third-caption" alt="">
  <img src="http://placekitten.com/150/150" rel="fourth-caption" alt="">
  <p class="first-caption">
    first caption
  </p>
  <p class="second-caption">
    second caption
  </p>
  <p class="third-caption">
    third caption
  </p>
  <p class="fourth-caption">
    fourth caption
  </p>
</div>
            
          
!

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function () {
  var $captions = $('.grid p');
  $captions.hide();
  $('.grid > img').hover(function() {
    var $rel = $(this).attr('rel');
    $captions.hide();
    $('.grid p.'+ $rel +'').show();
  });
});

            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................