Вертикальный сдвиг:
Наведите указатель мыши на фотографию
Данное решение сделано исходя из ширины изображения 100%. Другими словами, нам неизвестна его ширина и высота в пикселях.
Такой вариант является универсальным, в отличии от заданных размеров, и подойдет к любой фотографии в любом контейнере.
Мы накладываем друг на друга столько одинаковых картинок, на сколько частей нужно разделить исходную. И в каждой такой части показываем определенную ее область.
В примере это 5 одинаковых частей и соотв. ширина каждой должна быть 20%. Для этого помещаем изображения в блоки шириной 20% и размещаем их друг за другом. А для самой картинки в этом случае задаем ширину 500% (блок составляет 5-тую часть от нужного, поэтому увеличиваем в нем ширину картинки тоже в 5 раз). Задать 100% нельзя, в этом случае у нас получится 5 маленьких одинаковых картинок, а точное значение в пикселях неизвестно. Далее мы смещаем влево картинку во 2,3,4 и 5 областях на нужный процент.
Во второй области это 1/5 от 500% (100%), в третьей 2/5 от 500% (200%) и т.д.
В конце остается только раздвинуть наши части при наведнии мышки.
|
1 2 3 4 5 6 7 |
<div class="v-cut"> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> </div> |
|
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 |
.v-cut { margin: 30px; font-size: 0; letter-spacing: 0; } .v-cut div { transition: all 300ms ease-out; position: relative; display: inline-block; overflow: hidden; width: 20%; top: 0; } .v-cut div img { width: 500%; max-width: 500%; position: relative; } .v-cut div:nth-of-type(2) img { right: 100%; } .v-cut div:nth-of-type(3) img { right: 200%; } .v-cut div:nth-of-type(4) img { right: 300%; } .v-cut div:nth-of-type(5) img { right: 400%; } .v-cut:hover div:nth-of-type(2), .v-cut:hover div:nth-of-type(4) { top: 20px; } .v-cut:hover div:nth-of-type(1), .v-cut:hover div:nth-of-type(3), .v-cut:hover div:nth-of-type(5){ top: -20px; } |
Горизонтальный сдвиг:
Наведите указатель мыши на фотографию
Решение похоже на предыдущее, только тут картинкам задается ширина 100%, а не 500% и деление происходит по горизонтали.
Проблема возникает в том, что нам неизвестна высота, от которой считать проценты сдвигаемых блоков. Чтобы ее решить, мы добавляем еще 1 прозрачное изображение, которое даст нам нужное значение.
|
1 2 3 4 5 6 7 8 |
<div class="h-cut"> <img src="picture.jpg" /> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> </div> |
|
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 |
.h-cut { position: relative; margin: 30px; } .h-cut img { width: 100%; position: relative; } .h-cut > img { opacity: 0; } .h-cut div { transition: all 300ms ease-out; position: absolute; overflow: hidden; height: 20%; left: 0; width: 100%; top: 0; } .h-cut div:nth-of-type(2) { top: 20%; } .h-cut div:nth-of-type(3) { top: 40%; } .h-cut div:nth-of-type(4) { top: 60%; } .h-cut div:nth-of-type(5) { top: 80%; } .h-cut div:nth-of-type(2) img { bottom: 100%; } .h-cut div:nth-of-type(3) img { bottom: 200%; } .h-cut div:nth-of-type(4) img { bottom: 300%; } .h-cut div:nth-of-type(5) img { bottom: 400%; } .h-cut:hover div:nth-of-type(2), .h-cut:hover div:nth-of-type(4) { left: -20px; } .h-cut:hover div:nth-of-type(1), .h-cut:hover div:nth-of-type(3), .h-cut:hover div:nth-of-type(5){ left: 20px; } |
Немного креатива:
Наведите указатель мыши на фотографию
Пример такой же, как и горизонтальный сдвиг, только с блоками разной ширины (10% 10% 60% 10% 10%) и другим ховер эффектом.
Поэтому картинки мы увеличиваем соотвественно:
Блоки в 10% (1/10) - картинка 1000% (100% х 10)
Блок в 60% (6/10) - картинка 166.6666666666667% (100% х 10 / 6)
Сдвиг картинки для блока осуществляется так:
- Для второй - 1/10 от 1000% = 100%
- Для третьей - 2/10 от 166.66 = 33.33%
- Для четвертой - 8/10 от 1000% = 800%
- Для пятой - 9/10 от 1000% = 900%
|
1 2 3 4 5 6 7 |
<div class="c-cut"> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> <div><img src="picture.jpg" /></div> </div> |
|
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 |
.c-cut { overflow-x: hidden; padding: 30px; font-size: 0; letter-spacing: 0; } .c-cut div { transition: all 300ms ease-out; position: relative; display: inline-block; overflow: hidden; width: 10%; top: 0; } .c-cut div:nth-of-type(3) { width: 60%; z-index: 5; } .c-cut div:nth-of-type(4) { z-index: 3; } .c-cut div img { width: 1000%; max-width: 1000%; position: relative; transition: all 300ms ease-out; } .c-cut div:nth-of-type(2) img { right: 100%; } .c-cut div:nth-of-type(3) img { right: 33.33333333333333%; width: 166.6666666666667%; } .c-cut div:nth-of-type(4) img { right: 800%; } .c-cut div:nth-of-type(5) img { right: 900%; } .c-cut:hover div:nth-of-type(1){ transform: translateX(20px) rotate(-10deg) scale(0.8); } .c-cut:hover div:nth-of-type(2){ transform: translateX(10px) rotate(-5deg) scale(0.9); } .c-cut:hover div:nth-of-type(3){ transform: scale(1.05); box-shadow: 0 8px 16px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.2); } .c-cut:hover div:nth-of-type(3) img{ transform: scale(1.3); } .c-cut:hover div:nth-of-type(4){ transform: translateX(-10px) rotate(5deg) scale(0.9); } .c-cut:hover div:nth-of-type(5){ transform: translateX(-20px) rotate(10deg) scale(0.8); } |
Автор фотографий susan-lu4esm
Добавить комментарий: