Пример:
Решение сделано для квадратных изображений. Если они друого формата - нужно корректировать css-свойство margin-bottom (см. ниже)
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="rhomb"> <a href="#big-image"><img src="photo-1.jpg" alt="" /></a> <a href="#big-image"><img src="photo-2.jpg" alt="" /></a> <a href="#big-image"><img src="photo-3.jpg" alt="" /></a> <a href="#big-image"><img src="photo-4.jpg" alt="" /></a> <a href="#big-image"><img src="photo-5.jpg" alt="" /></a> <a href="#big-image"><img src="photo-6.jpg" alt="" /></a> <a href="#big-image"><img src="photo-7.jpg" alt="" /></a> <a href="#big-image"><img src="photo-8.jpg" alt="" /></a> <a href="#big-image"><img src="photo-9.jpg" alt="" /></a> <a href="#big-image"><img src="photo-10.jpg" alt="" /></a> </div> |
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.rhomb { margin: auto; max-width: 1200px; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(4, 1fr); grid-gap: 1vmin; } .rhomb a { grid-column: span 2; z-index: 1; position: relative; clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); margin-bottom: -52%; transform: scale(1); transition: all .25s; } .rhomb a:nth-child(7n + 1) { grid-column: 2 / span 2; } .rhomb a:hover { z-index: 2; transform: scale(1.6); } .rhomb img { max-width: 100%; } |
Если при наведении мышки нужно показать фотографию как она есть (пример на фото к теме), нужно заменить:
|
1 2 3 4 |
.rhomb a:hover { z-index: 2; transform: scale(1.6); } |
на:
|
1 2 3 4 5 |
.rhomb a:hover { z-index: 2; transform: scale(1.2); clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%); } |
Фотографии kellepics
Добавить комментарий: