Eliminate Rollover Behavior on <a> tag over an image

Question

I have the following piece of code that functionally works well.

<div class="user-pic round-pic">
 <a href="<?php echo $userLoggedIn; ?>"><img src="<?php echo $user['profile_pic']; ?>"></a>
</div>

The problem is how it looks. When I rollover the image to click, I get this weird half transparent gradient look.

I know it's a stupid pic but I'm working locally. Here is the CSS for this pic:

round-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}

Any thoughts on how I could eliminate this rollover behavior? Little things like this bother me not to mention detract from the UX.

Any help would be appreciated.

Answer 1

Based on a forum suggestion I discovered img:hover{opacity: 0.95} was set in main.css. I simply targeted the <a> tag and used inline to change the style.

<a href="#" style="opacity: 1;"><img src="assets/images/profile_pics/blarg.jpeg"></a>

Not a huge issue obviously, but needed to be corrected nonetheless.