It seems like I'm facing a common issue, but none of the solutions I've found from previous Stack Overflow posts are fixing it. On my website, I have multiple images that should display text (including a link) over them with reduced opacity when hovered over. However, when I hover over the image, the hover effect flickers and loses focus. I've tried enclosing the image and text within a div as suggested in this post: Hover-Effect disappears, when hovering over Text. Unfortunately, that solution is not working for my situation.
.hover_img:hover img {
opacity: .2;
}
.portfolio_img:hover + .center_text {
display: block;
}
.center_text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: none;
font-weight: bold;
}<div class="container">
<div class="row">
<div class="col-md-4">
<div class="hover_img">
<img class="portfolio_img" src="https://www.w3schools.com/w3images/fjords.jpg" alt="Image">
<div class="center_text">Click here for info <a href="https://stackoverflow.com" target="_blank">Stackoverflow</a></div>
</div>
</div>
</div>
</div>