Устранить поведение при опрокидывании тега <a>на изображении

Question

У меня есть следующий фрагмент кода, который функционально работает хорошо.

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

Проблема в том, как это выглядит.Когда я переключаю изображение, чтобы щелкнуть, я получаю этот странный полупрозрачный градиентный вид.

Я знаю, что это глупая картинкано я работаю локальноВот CSS для этой картинки:

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

Есть какие-нибудь мысли о том, как я могу устранить это поведение при опрокидывании?Такие мелочи меня беспокоят, не говоря уже о том, чтобы отвлекать внимание от UX.

Любая помощь будет оценена.

Answer 1

Основываясь на предложении форума, я обнаружил, что img:hover{opacity: 0.95} установлено в main.css.Я просто нацелился на тег <a> и использовал inline, чтобы изменить стиль.

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

Очевидно, что это не большая проблема, но, тем не менее, ее необходимо исправить.