JSFiddle - React, Tailwind, and code Playground

by lun471k

HTML

<!-- my added code -->
<div id="overlay" class="overlay"></div>
<!-- OP's original code -->
<div class="process">
  <h3 class="text-center">Process</h3>
    <ul class="row text-center list-inline  wowload bounceInUp animated" style="visibility: visible; animation-name: bounceInUp;">
        <li data-id="Reflexion">
          <span><i class="fa fa-flask"></i><b>Reflexion</b></span>
        </li>
   </ul>
</div>

CSS

.process ul li{
    width: 10em;
    height: 10em;
    border: 1px solid #CEEBF0;
    padding: 0;
    border-radius: 50%;
    margin: 0 1.25em;
    line-height: 13.5em;
    color: #21ABCA;
     -webkit-transition: border-color 0.5s ease-in; /* Safari */
     -moz-transition: border-color 0.5s ease-in; /* Firefox */
    transition: border-color 0.5s ease-in;
}
.process ul li span{line-height: 2em;display: inline-block;font-weight: 300;}
.process ul li span i{font-size: 3em;}
.process ul li span b{display: block;font-size: 1em;font-weight: 300;}

.process ul li:hover {
    border-color:#3498db;
    background-color: rgba(52, 152, 219,1.0);
}

.overlay {
    display:none;
    position: fixed;
    z-index: 50;
    background-color: red;
    height: 100vh;
    width: 100vw;
}

/* ADDED STUFF */
.over1{
    display:block;
    z-index:50;
}
.over2 {z-index:51}

JavaScript

$(".process ul li").on({
    mouseenter : function() {
        $('#overlay').addClass('over1');
        $(this).addClass('over2'); //Added this
    },
    mouseleave : function() {
        $('#overlay').removeClass('over1');
        $(this).removeClass('over2'); //Added this
    },
});