JSFiddle - React, Tailwind, and code Playground

Nifty Bar Roll Over Right Here

by Jennifer Perrin

HTML

<a href="#" class="dip-nav-link">
  <div class="dip-nav-copy">
      <div class="dip-nav-category">Recent Post</div>
      <div class="dip-nav-title">Nifty Bar Roll Over Right Here</div>
      <div class="dip-nav-comments">6 Comments</div>
  </div>
  <div class="dip-roll-bar"></div>
</a>

CSS

@import url(http://fonts.googleapis.com/css?family=Merriweather:400,900);
body {
  margin: 100px;
  background: #222 url('/images/classy_fabric.png');
    font-family: Helvetica, Arial, sans-serif;
}
.dip-nav-link {
  position: relative;
  display: block;
  width: 300px;
  text-decoration: none;
  color: #fff;
  text-shadow: 2px 2px 2px rgba(20,20,20,.5);
}
.dip-nav-copy {
  position: absolute;
  z-index: 10;
}
.dip-nav-category {
  display: block;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #f37014;
}
.dip-nav-title {
  display: block;
  margin: 4px 0;
  font: 900 24px/30px 'Merriweather', serif;
}
.dip-nav-comments {
  display: block;
  font-size: 11px;
  color: #999;
}
.dip-roll-bar {
  content: '';
  position: absolute;
  top: 50px;
  z-index: 5;
  width: 0;
  height: 0;
  background: rgba(236,109,19,.4);
  transition: all .2s ease-in;
    transform: perspective( 1000px ) rotateX( -90deg );
  box-shadow: inset 0 0 20px rgba(0,0,0,.4);
}
.dip-nav-link:hover .dip-roll-bar {
  top: -10px;
    transform: perspective( 350px ) rotateX( 0deg );
}

JavaScript

//Get Window Width
var widthWidth = window.innerWidth;
//Get the position of the link
var position = $('.dip-nav-link').position();
//Adjust for the offset of the link
var leftAdjust = -(position.left);
//Get the height of the link
var heightAdjust = 20+($('.dip-nav-copy').height());

function whatSize() {
    $('.dip-roll-bar').css('left', leftAdjust);
}
window.onresize = function(){
    widthWidth = window.innerWidth;
    whatSize();
};
whatSize();

$('.dip-nav-link').hover(
  function () {
    $('.dip-roll-bar',this).css('width', widthWidth)
    .css('height',heightAdjust);
  }, 
  function () {
    $('.dip-roll-bar',this)
      .css('width', 0)
      .css('height', 0);
  }
);