JSFiddle - React, Tailwind, and code Playground

by Radioactive

HTML

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

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

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

<figure class="rift">
  <img src="http://kylefoster.me/rift/img/04.jpg" alt="Image 04">
  <figcaption class="caption">Image 04</figcaption>
</figure>

CSS

.rift { 
  width: 250px; /* Define width */
  height: 250px; /* 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 */
}

JavaScript

;(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();