JSFiddle - React, Tailwind, and code Playground

by Ryan J

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script>
<div class="row">
  <div class="col-lg-9 col-md-9 col-sm-9">
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane fade active in" id="item1">
        <div id="animation-tab-1" class="animation"></div>
        <div class="content c-1" id="item-content-1">
          <p>MAKE ME LOOK SEXY ITEM 1</p>
        </div>
      </div>
      <div class="tab-pane fade" id="item2">
        <div id="animation-tab-2" class="animation"></div>
        <div class="content" id="item-content-2">
          <p>MAKE ME LOOK SEXY ITEM 2</p>
        </div>
      </div>
      <div class="tab-pane fade" id="item3">
        <div id="animation-tab-3" class="animation"></div>
        <div class="content" id="item-content-3">
          <p>MAKE ME LOOK SEXY ITEM 3</p>
        </div>
      </div>
      <div class="tab-pane fade" id="item4">
        <div id="animation-tab-4" class="animation"></div>
        <div class="content" id="item-content-4">
          <p>MAKE ME LOOK SEXY ITEM 4</p>
        </div>
      </div>
    </div>
  </div>
  <div class="col-lg-3 col-md-3 col-sm-3">
    <ul id="myTab" class="nav nav-tabs nav nav-pills nav-stacked">
      <li class="active"><a href="#item1" data-toggle="tab" data-animation="1">ITEM 1</a></li>
      <li><a href="#item2" data-toggle="tab" data-animation="2">ITEM 2</a></li>
      <li><a href="#item3" data-toggle="tab" data-animation="3">ITEM 3</a></li>
      <li><a href="#item4" data-toggle="tab" data-animation="4">ITEM 4</a></li>

    </ul>
  </div>
</div>

CSS

.animation {
  position: relative;
  width: 403px;
  height: 93px;
  margin: 50px auto 100px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  backround: #fafafa url("http://sfcd.com/assets/img/homepage/animations/product_strategy-a812127362.gif") no-repeat fixed center;
}

body {
  background-color: #130f30;
  color: #fff;
}

JavaScript

var timer;
var delay = 500;

$('.nav-tabs > li > a').hover(function() {
  var animation_id = $(this).data("animation");
  var animation_image = getAnimationImage(animation_id);
  timer = setTimeout(function() {
    document.getElementById('animation-tab-' + animation_id).style.backgroundImage = "url('" + animation_image + "?v=" + new Date().valueOf() + "')";
    $('[href="#item' + animation_id + '"]').tab('show');
  }, delay);
}, function() {
  clearTimeout(timer);
});

function getAnimationImage(id) {
  switch (id) {
    case 1:
      return "http://sfcd.com/assets/img/homepage/animations/product_strategy-a812127362.gif";
      break;
    case 2:
      return "http://sfcd.com/assets/img/homepage/animations/user_research-b76a19166c.gif";
      break;
    case 3:
      return "http://sfcd.com/assets/img/homepage/animations/ux_design-caf3d917ed.gif";
      break;
    case 4:
      return "http://sfcd.com/assets/img/homepage/animations/mobile_development-b93d92320a.gif";
      break;
  }
}

$(document).ready(function() {
  var animation_image = getAnimationImage(1);
  document.getElementById('animation-tab-1').style.backgroundImage = "url('" + animation_image + "?v=" + new Date().valueOf() + "')";
});