CodePen

HTML

            
              <figure class="rift">
  <img src="http://kylefoster.me/rift/img/01.jpg" alt="Leo">
  <figcaption class="caption">Caption 01</figcaption>
</figure>

<figure class="rift">
  <img src="http://kylefoster.me/rift/img/02.jpg" alt="Don">
  <figcaption class="caption">Caption 02</figcaption>
</figure>

<figure class="rift">
  <img src="http://kylefoster.me/rift/img/03.jpg" alt="Raph">
  <figcaption class="caption">Caption 03</figcaption>
</figure>

<figure class="rift">
  <img src="http://kylefoster.me/rift/img/04.jpg" alt="Mikey">
  <figcaption class="caption">Caption 04</figcaption>
</figure>
            
          
!
via HTML Inspector

CSS

            
              /* Base plugin styles */

.rift { 
  width: 300px; /* Define width */
  height: 200px; /* Define height */
  position: relative; 
  overflow: hidden;
  backface-visibility: hidden;
}

.rift img { 
  width: 100%; 
  height: auto; 
  opacity: 0;
}

.rift .caption { 
  position: absolute; 
  top: 50%;
  width: 100%;
  height: 60px; /* Define caption height */
  line-height: 60px; /* Define matched line-height */ 
  margin: -30px 0 0 0; /* Half caption height */
  text-align: center; 
  z-index: 0;
}

.rift span[class*="span"] {
  display: block;
  width: 100%;
  height: 50%;
  overflow: hidden;
  position: absolute;
  left: 0;
  z-index: 1;
  transform: translate3d(0,0,0); /* Acceleration FTW */
  transition: transform .25s; /* Define anim. speed */
}

.rift span.top-span { top: 0; }
.rift span.btm-span { bottom: 0; }

.rift:hover span.top-span { 
  transform: translate(0,-30px); /* Half caption height */
}

.rift:hover > span.btm-span { 
  transform: translate(0,30px); /* Half caption height */
}

/* Non-plugin styles */

body { 
  text-align: center;
  background: #CCC; 
}

.rift { 
  display: inline-block;
  cursor: pointer;
  margin: 20px 0 0 20px; 
}

.rift .caption { 
  color: #FFF; 
  background: #C00C00;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /**
 * Rift v1.0.0
 * An itsy bitsy image-splitting jQuery plugin
 * 
 * Licensed under the MIT license.
 * Copyright 2013 Kyle Foster @hkfoster
 */
;(function ( $, window, document, undefined ) {

  $.fn.rift = function () {

    return this.each(function () {
      
      // Vurribles
      var element = $(this),
          elemImg = element.find('img'),
          imgSrc  = elemImg.attr('src');
  
      // We be chainin'  
      element
        .prepend('<span class="top-span"></span>')
        .append('<span class="btm-span"></span>')
        .find('span.top-span')
        .css('background', 'url(' + imgSrc + ') no-repeat center top')
        .css('background-size', '100%')
        .parent()
        .find('span.btm-span')
        .css('background', 'url(' + imgSrc + ') no-repeat center bottom')
        .css('background-size', '100%');
    });
  };
})( jQuery, window, document );

$('.rift').rift();
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................