Всем доброго времени суток. Хотел бы узнать, как иконки, которые находятся на картинке, при наведение сделать оригинальными, без наложений других эффектов на них.
Прилагаю код на первого блока.
<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 фильтры - не помогает.
Так же есть второй вопрос, но не касающийся к этой теме. Для этого блока лучше использовать слайдер? Или что то другое?
Всем спасибо за внимание, труд, и терпимость ?
