Yesterday I faced a challenge with a tracking problem while trying to implement code on a w3schools webpage. The issue was with a hover effect triggering an overlay when the mouse was placed anywhere on the line, rather than just within the card area. I've been struggling to resolve this issue.
Here is the HTML code I am working with:
<section class="bgimage">
<div class="container-item ">
<div class="row justify-content-center">
<div class="col-md-3">
<div class="hovereffect">
<div class="card shadow" style="width: 20rem;">
<img class="card-img-top" src="images/popit/item1.png" alt="1">
<div class="card-body text-center">
<div class="overlay-item">
<h5 class="card-title">Design</h5>
<p class="card-text">TEST</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
Below is the CSS code referenced from W3Schools:
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color: #008CBA;
}
.container:hover .overlay {
opacity: 1;
}
Here is a screenshot illustrating the issue: https://i.sstatic.net/YAW3E.jpg
Your help is greatly appreciated!