Having multiple div elements with content, I am attempting to add a dark overlay when hovered over.
Here is my HTML code:
<div class="main-slider">
<div class="owl-item">
<li class="dark-overlay">
//content
</li>
</div>
<div class="owl-item">
<li class="dark-overlay">
//content
</li>
</div>
<div class="owl-item">
<li class="dark-overlay">
//content
</li>
</div>
</ul>
My attempt using CSS is as follows:
.dark-overlay{
background:rgba(0,0,0,.75);
text-align:center;
padding:45px 0 66px 0;
opacity:0;
-webkit-transition: opacity .25s ease;
}
.main-slider li:hover {
opacity:1;
}
However, the implementation is not functioning as expected.