Заднее изображение, hover и filter

[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 фильтры - не помогает.

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

 

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

Edited September 10, 2018 by deafnvoy

[npofopr]

3 часа назад, deafnvoy сказал:

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

что? что у вас не оригинальное? 
Выкладывайте код в песочнику, лучше.

 

3 часа назад, deafnvoy сказал:

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

зачем? можно просто ограничиться шестью блоками. кто то делает ещё кнопку "показать ещё" с загрузкой других плиток. Можно и слайдер, конечно. 

[AlexZaw]

3 часа назад, deafnvoy сказал:

Для этого блока лучше использовать слайдер? Или что то другое?

Это называется табы.

А по поводу оригинальности - уточните, что вы имели ввиду?

[arnoldovich]

7 часов назад, deafnvoy сказал:

как иконки, которые находятся на картинке

Какие иконки?

[deafnvoy]

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

[npofopr]

Поставить поверх фонов/ фильтров.