消除<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.
上的滚动行为

我知道这是一张愚蠢的照片，但我在当地工作。这是这张图片的CSS：

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

有关如何消除此翻转行为的任何想法？这样的小事情让我感到烦恼，更不用说有辱人意。

任何帮助将不胜感激。

Answer 1

根据论坛建议，我发现在main.css中设置了img:hover{opacity: 0.95}。我只是针对<a>标记并使用内联来更改样式。

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

显然不是一个大问题，但仍需要纠正。