JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="page-banner">
  <div class="front">
    <div class="button"></div>
    <div class="box" style="transition-delay : 0;"><!-- Hover Links --></div>
    <div class="box" style="transition-delay : 0.2s;"><!-- Hover Links --></div>
    <div class="box" style="transition-delay : 0.4s;"><!-- Hover Links --></div>
    <div class="box" style="transition-delay : 0.6s;"><!-- Hover Links --></div>
  </div>
  
<div class="back"></div>
  
</div>

CSS

body {
  margin: 0;
}
* {
  box-sizing: border-box;
}
div#page-banner {
  width: 100%;
  height: 140px;
  position: relative;
  background: #232732;
}
div#page-banner div.front {
  position: relative;
  width: 100%;
  height: 140px;
  z-index: 3;
}
div#page-banner div.front div.button {
  width: 60px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  z-index: 2;
}
div#page-banner div.front:after {
  content: '';
  display: table;
  clear: both;
}
div#page-banner div.front div.box {
  width: 25%;
  height: 140px;
  float: left;
  background: yellow;
  -webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
  transition: .4s cubic-bezier(0.76, 0.02, 0.72, 0.99);
}
div#page-banner div.front div.box.active {
  -webkit-clip-path: polygon(0 0, 103% 0, 103% 103%, 0 100%);
clip-path: polygon(0 0, 103% 0, 103% 103%, 0 103%);
transition: 1s cubic-bezier(0.21, 0, 0, 0.99);
transition-delay : 0;
}
div.back {
  position: absolute;
  width: calc(100% - 60px);
  left: 60px;
  top: 0;
  height: 100%;
  background: brown;
  transition: 1.3s;
}
div.back.active {
  opacity: 1;
}

JavaScript

$('.front').on('mouseover' , function(){
 $('.box').addClass('active');
 $('.back').addClass('active')
})
$('.front').on('mouseout' , function(){
 $('.box').removeClass('active');
 $('.back').removeClass('active')
})