deafnvoy

Так вы приглядитесь на первый скриншот на первый блок, который уже наведен, там есть эти иконки. И для наглядности, на втором скриншоте видно, как должно было быть, только уже во втором блоке наведен.

Всем доброго времени суток. Хотел бы узнать, как иконки, которые находятся на картинке, при наведение сделать оригинальными, без наложений других эффектов на них.

Прилагаю код на первого блока.

<div class="project-block project-block_1"><div class="project-block__img">
    <div class="project-block__img_link">
        <a href="#"></a>
    </div>
    <div class="project-block__img_lupa">
        <a href="#"></a>
    </div>
    <img src="img/projects/photo1.jpg" alt="">
</div>
<div class="project-block__descr_block">
    <h1 class="project-block_title">Claritas Etiam Processus</h1>
    <h2 class="project-block_descr">Photography, Nature</h2>
</div></div>

.project-block__img {
  height: 237px;
  position: relative;
  z-index: 2;
}
.project-block__img_link {
  background: url("../img/projects/link.svg") center no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}
.project-block__img_lupa {
  background: url("../img/projects/lupa.svg") center no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 20%;
  top: 0;
  opacity: 0;
}
.project-block:hover .project-block__img {
  -webkit-filter: brightness(50%);
          filter: brightness(50%);
  z-index: -1;
}
.project-block:hover .project-block__img_link {
  opacity: 1;
  z-index: 5;
}
.project-block:hover .project-block__img_lupa {
  opacity: 1;
  z-index: 1001;

Пробовал прописывать, для hover фильтры - не помогает.

Так же есть второй вопрос, но не касающийся к этой теме. Для этого блока лучше использовать слайдер? Или что то другое?

Всем спасибо за внимание, труд, и терпимость ?