I'm struggling with achieving a specific effect.
Whenever I hover the mouse over this element :
<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>
I wish to have an overlay covering the entire page, with my <ul>...</ul> on top of it
I've attempted using z-index and position, but unfortunately, it's not working as expected. The overlay always appears above all content, including the <ul>...</ul>
Below are the styles for <ul></ul> and .overlay
.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 {
position: fixed;
z-index: 50;
background-color: red;
height: 100vh;
width: 100vw;
}
Here is the script I'm using to listen to mouse events :
$(".process ul li").on({
mouseenter : function() {
$('#overlay').addClass('overlay');
},
mouseleave : function() {
$('#overlay').removeClass('overlay');
},
});
Update
There is a Fiddle that visually demonstrates my issue better than words can explain