Постер:
HTML:
|
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 28 29 |
<div class="poster-images"> <a href="#link"> <img src="photo-1.jpg" alt=""> </a> <a href="#link"> <img src="photo-2.jpg" alt=""> </a> <a href="#link"> <img src="photo-3.jpg" alt=""> </a> <a href="#link"> <img src="photo-4.jpg" alt=""> </a> <a href="#link"> <img src="photo-5.jpg" alt=""> </a> <a href="#link"> <img src="photo-6.jpg" alt=""> </a> <a href="#link"> <img src="photo-7.jpg" alt=""> </a> <a href="#link"> <img src="photo-8.jpg" alt=""> </a> <a href="#link"> <img src="photo-9.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 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 |
.poster-images { padding: .8rem; background: #000; height: 800px; width: 100%; max-width: 600px; margin: 20px auto; overflow: hidden; display: grid; grid-template-columns: 1fr .7fr .3fr 1fr; grid-template-rows: 20% 40% 20% 20%; grid-template-areas: 'one two two three' 'four five five five' 'six five five five' 'six seven eight eight'; box-sizing: border-box; } @media screen and (max-width:600px) { .poster-images { height: 600px; } } .poster-images img { width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 40% 0; filter: sepia(0.5); transition: filter 0.5s; } .poster-images a:hover img { filter: sepia(0); } .poster-images a:nth-child(1) img, .poster-images a:nth-child(2) img, .poster-images a:nth-child(3) img { width: 120%; height: 120%; } .poster-images a:nth-child(4) img, .poster-images a:nth-child(9) img { width: 135%; height: 135%; } .poster-images a:nth-child(5) img { width: 105%; height: 105%; } .poster-images a:first-child { grid-area: one; clip-path: polygon(0% 0%, 93.24% 0%, 105.04% 110.16%, 0% 90%); } .poster-images a:nth-child(2) { grid-area: two; clip-path: polygon(0% 0%, 108.28% 0%, 96.45% 110.13%, 10.55% 110.93%); } .poster-images a:nth-child(3) { grid-area: three; clip-path: polygon(15.05% 0%, 100% 0%, 99.35% 91.7%, 3.08% 108.48%); } .poster-images a:nth-child(4) { grid-area: four; clip-path: polygon(0% -0.85%, 106.34% 9.98%, 121.32% 65.63%, 99.66% 109.89%, 1.86% 124.41%); } .poster-images a:nth-child(5) { grid-area: five; clip-path: polygon(6.4% 6.48%, 47.24% 5.89%, 100% 0%, 98.41% 96.85%, 53.37% 102.5%, 53% 63.21%, 3.23% 73.02%, 14.3% 44.04%); } .poster-images a:nth-child(6) { grid-area: six; clip-path: polygon(2.14% 29.3%, 99.34% 15.42%, 98.14% 100.82%, 1.57% 101.2%); } .poster-images a:nth-child(7) { grid-area: seven; clip-path: polygon(7.92% 33.47%, 96.31% 23.39%, 95.38% 100%, 5.3% 100.85%); } .poster-images a:nth-child(8) { grid-area: eight; clip-path: polygon(2.5% 22.35%, 100% 0%, 100% 100%, 1.55% 100%); } .poster-images a:nth-child(9) { grid-row-start: 3; grid-row-end: 4; grid-column-start: 2; grid-column-end: 4; clip-path: polygon(5.94% 28.66%, 100.61% -0.67%, 101.1% 108.57%, 5.4% 126.28%); } |
- Позицию каждой фотографии можно подогнать свойством
object-position, как проставлены для некоторых размеры - Выбрать другой фильтр для фотографий можно в теме "CSS фильтры" и заменить
filter: sepia(0.5)на нужный - Если не делать из постера своего рода галерею, то нужно заменить тег
анаdivи убрать этот фильтр
Найдено на codepen.io у пользователя Shireen
Добавить комментарий: