Решение выполнено с использованием css-свойств display: grid; и clip-path

Постер:

HTML:

CSS:

  • Позицию каждой фотографии можно подогнать свойством object-position, как проставлены для некоторых размеры
  • Выбрать другой фильтр для фотографий можно в теме "CSS фильтры" и заменить filter: sepia(0.5) на нужный
  • Если не делать из постера своего рода галерею, то нужно заменить тег а на div и убрать этот фильтр

Найдено на codepen.io у пользователя Shireen

Смотрите также:

Небольшой скрипт для полноэкранного просмотра одиночных изображений

Тасующиеся по клику фотографии как колода карт

Красивое оформление секции с фотографией и заголовком, который частично заполнен ей

Добавить комментарий:

Ваш комментарий отправлен!

Комментарии:

  • Богдан:

    Внатуре классно! Разраб молодец, всё работает

    Ответить