phookasymi
@phookasymi

Как реализовать данный в примере hover-эффект?

Здравствуйте!
Тренируюсь верстать по шаблонам, наткнулась на подобный блок.

5cdbb21b97574714673983.jpeg

Саму сетку сверстала при помощи грида.
Каждый элемент - это тег fugure с картинкой и figcaption.

<div class="posts">
      <figure class="post show-photo">
          <img src="img/post1.jpg" alt="post 1">
          <figcaption class="post_caption">
             <h3 class="post__title">Claritas Etiam Processus</h3>
             <span class="post__subtitle">Photography, Nature</span>
          </figcaption>
        </figure>
</div>


И теперь не знаю как сверстать данный эффект.

Я так понимаю, лупа указывает на то, что мы можем перейти на страницу с данной работой.
Значит каждый блок - это ссылка. Соответственно надо обернуть содержимое тега figure в ссылку.
Т.е при наведении на ссылку - нужно показывать значки, затемнять фото(с помощью градиента, я думаю) и у figcaption менять фон на темный.
Правильно я размышляю?
Если да, то я все равно не понимаю как это реализовать, чтобы при наведении на ссылку менялись стили у разных блоков.
Или это можно как-то проще и лучше?

Помогите, пожалуйста, разобраться.
  • Вопрос задан
  • 198 просмотров
Пригласить эксперта
Ответы на вопрос 1
tsepen
@tsepen
Frontend developer
Добавь в figure абсолютно позиционированный блок с полупрозрачным фоном черным и ссылкой, сделай его display: none; При ховере на figure - делаешь его видимым и figcaption меняешь фон и цвет шрифта
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы