Пример:
Выбрать другой фон для примера:
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<div class="photowave"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </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 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 |
.photowave { --index: calc(1vw + 1vh); --transition: cubic-bezier(.1, .7, 0, 1); margin: 20px 0; display: flex; justify-content: center; gap: 0.4%; perspective: calc(var(--index) * 50); width: 100%; position: relative; z-index: 10; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1)) drop-shadow(0 12px 16px rgba(0,0,0,0.05)); } .photowave div { width: 7.5%; height: 400px; background-image: url('photo.jpg'); background-repeat: no-repeat; background-size: 1300% auto; filter: contrast(1) brightness(1) saturate(1); transition: transform 1.25s var(--transition), filter 3s var(--transition), width 1.25s var(--transition); will-change: transform, filter, rotateY, width; } @media (max-width: 991px) { .photowave div { height: 250px; } } @media (max-width:575px) { .photowave div { height: 150px; } } .photowave div:nth-child(1) { background-position: 0 center; } .photowave div:nth-child(2) { background-position: 8.33333% center; } .photowave div:nth-child(3) { background-position: 16.66666% center; } .photowave div:nth-child(4) { background-position: 24.99999% center; } .photowave div:nth-child(5) { background-position: 33.33332% center; } .photowave div:nth-child(6) { background-position: 41.66665% center; } .photowave div:nth-child(7) { background-position: 49.99998% center; } .photowave div:nth-child(8) { background-position: 58.33331% center; } .photowave div:nth-child(9) { background-position: 66.66664% center; } .photowave div:nth-child(10) { background-position: 74.99997% center; } .photowave div:nth-child(11) { background-position: 83.3333% center; } .photowave div:nth-child(12) { background-position: 91.6666% center; } .photowave div:nth-child(13) { background-position: 100% center; } .photowave div:before, .photowave div:after { content: ''; position: absolute; height: 100%; width: 30px; right: calc(var(--index) * -1); } .photowave div:after { left: calc(var(--index) * -1); } .photowave div:hover { filter: contrast(1.3) brightness(1.3) saturate(1.3); transform: translateZ(calc(var(--index) * 10)); } .photowave div:hover + * { filter: contrast(1.25) brightness(1.25) saturate(1.25); transform: translateZ(calc(var(--index) * 8.5)) rotateY(35deg); z-index: -1; } .photowave div:hover + * + * { filter: contrast(1.2) brightness(1.2) saturate(1.2); transform: translateZ(calc(var(--index) * 5.6)) rotateY(40deg); z-index: -2; } .photowave div:hover + * + * + * { filter: contrast(1.15) brightness(1.1) saturate(1.1); transform: translateZ(calc(var(--index) * 2.5)) rotateY(30deg); z-index: -3; } .photowave div:hover + * + * + * + * { filter: contrast(1.1) brightness(1.05) saturate(1.05); transform: translateZ(calc(var(--index) * .6)) rotateY(15deg); z-index: -4; } .photowave div:has( + :hover) { filter: contrast(1.25) brightness(1.25) saturate(1.25); transform: translateZ(calc(var(--index) * 8.5)) rotateY(-35deg); } .photowave div:has( + * + :hover) { filter: contrast(1.2) brightness(1.2) saturate(1.2); transform: translateZ(calc(var(--index) * 5.6)) rotateY(-40deg); } .photowave div:has( + * + * + :hover) { filter: contrast(1.15) brightness(1.1) saturate(1.1); transform: translateZ(calc(var(--index) * 2.5)) rotateY(-30deg); } .photowave div:has( + * + * + * + :hover) { filter: contrast(1.1) brightness(1.05) saturate(1.05); transform: translateZ(calc(var(--index) * .6)) rotateY(-15deg); } |
За основу взято решение, найденное на codepen.io у пользователя Thea
Классный Эффект