I'm encountering an issue where I am attempting to make two clip path polygons overlap each other when hovered over by the mouse. I have been using z-index values and trying to adjust them based on which overlay is being hovered over, but unfortunately, it seems like my efforts are not yielding the desired outcome. I attempted changing the z-index when the object is hovered over, but it does not appear to be making any difference.
.banner {
position:relative;
bottom 0;
top: 0;
left:0;
right: 0;
width: 100%;
height: 700px;
}
.overlayleft {
position:absolute;
z-index:1;
bottom 0;
top: 0;
left:0;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 75% 0, 100% 100%, 0% 100%);
background: rgba(0,0,0,1);
transition: .5s ease;
}
.overlayright {
position:absolute;
z-index:2;
bottom: 0;
top 0;
left: 50%;
right: 0;
width: 50%;
height: 100%;
overflow:hidden;
clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);
background: rgba(0,0,0,0.6);
transition: .5s ease;
}
.overlayleft:hover{
z-index: 4;
width: 100%;
}
.overlayright:hover{
z-index: 4;
width: 100%;
left: 0;
}<!DOCTYPE html>
<html>
<body>
<div class="banner">
<div class="overlayright"></div>
<div class="overlayleft"></div>
</div>
</body>
</html>