Секция с шестиугольными фотографиями

Данное решение можно использовать как вспомогательный блок к какой-либо текстовой информации, или, увеличив масштаб, как самостоятельную секцию.

Также на фотографии можно установить ссылки или появляющийся поясняющий текст

Пример:

HTML:

CSS:

Масштаб изменяется значением свойства font-size в классе .hexagon-photo. При его изменении стоит подкоректировать переключение на мобильные варианты, изменив значения @media screen and (max-width: новое_значение)

За основу взято решение, найденное codepen.io у пользователя Ivan Bogachev
Фотографии kellepics

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

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

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