Как сделать чтобы хвер был по картинке?

Question

[kentos]

Здравствуйте, сделал hover еффект и получилось немного криво, не могу понять почему

<div class="hover_bg">
                        <a href="img/full_diplom.png" data-lightbox="image-1" tabindex="0">
                      <img class=" icon_hover_modal ml-n2 diplom" src="../../img/diplom.png" alt="">
                    </a>
                    <div class="sertif_hover">
                        <a href="img/full_diplom.png" data-lightbox="image-1" tabindex="0"><img src="../../img/search.svg"></a>
                      </div>
                      </div>

.hover_bg:hover .sertif_hover {
  display: block;
}

.sertif_hover {
  display: none;
  width: 100%;
  height: 100%;
  right: 0%;
  position: absolute;
  top: 0%;
  background-image: linear-gradient(
    90deg,
    rgba(184, 136, 246, 0.7) 0,
    rgba(234, 118, 227, 0.7)
  );
  img {
    left: 45%;
    top: 40%;
    position: absolute;
  }
}



.hover_bg {
  display:inline-block;
  position: relative;
}

результат

Answer 1

[Alfieros]

Держи, дальше думаю разберёшься сам.

Comments

[kentos]

Спасибо!!!! Получилось вот так

как сделать именно чтобы только фото затрагивало?