Увеличение фото от центра
В примере используются две одинаковые фотографии, одна из которых увеличивается при наведении курсора мыши.
Эффект подходит для картинок любого размера и хорошо может подойти для фотогалерей.
|
1 2 3 4 5 6 |
<div class="center-hover"> <img src="photo.jpg" /> <div class="center-hover-img"> <img src="photo.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 |
.center-hover { margin: 20px 0; position: relative; background: #000; } .center-hover img { width: 100%; transition: all 400ms ease-out; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); border: 6px solid #BFE2FF; box-sizing: border-box; } .center-hover-img { position: absolute; top: 80px; left: 80px; width: calc(100% - 160px); height: calc(100% - 160px); overflow: hidden; transition: all 500ms ease-out; box-sizing: border-box; } .center-hover-img img { width: calc(100% + 160px); left: -80px; top: -80px; position: relative; max-width: none; } .center-hover:hover .center-hover-img { top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2); border: 6px solid #BFE2FF; } .center-hover:hover .center-hover-img img { width: calc(100% + 80px); left: -40px; top: -40px; } .center-hover:hover > img { opacity: 0.3; } |
Разрезанное фото
В примере используются четыре одинаковые фотографии, которые соединяются при наведении курсора мыши.
Вариант немного креативный и подойдет не для всех фотографий и не для всех размеров. Но при желании можно подкрутить проценты свойств clip-path и transform.
|
1 2 3 4 5 6 |
<div class="diagonal-hover"> <img src="photo.jpg" /> <img src="photo.jpg" /> <img src="photo.jpg" /> <img src="photo.jpg" /> </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 |
.diagonal-hover { margin: 30px 0 20px 40px; position: relative; } .diagonal-hover img { position: absolute; top: 0; left: 0; width: 100%; transition: transform 300ms ease; } .diagonal-hover img:nth-of-type(1) { clip-path: polygon(0 0, 0 25%, 25% 0); transform: translate(-11px, -11px); position: static; } .diagonal-hover img:nth-of-type(2) { clip-path: polygon(25% 0, 0 25%, 0 100%, 25% 100%, 75% 0); transform: translate(-32px, 7px); } .diagonal-hover img:nth-of-type(3) { clip-path: polygon(100% 0, 100% 75%, 75% 100%, 25% 100%, 75% 0); transform: translate(-15px, -10px); } .diagonal-hover img:nth-of-type(4) { clip-path: polygon(100% 75%, 75% 100%, 100% 100%); transform: translate(-29px, 4px); } .diagonal-hover:hover img { transform: translate(-15px, -10px); } |
Глитч ховер эффект:
В данном примере используется 5 одинаковых фото. Одна остается на месте, а четыре другие смещаются при наведении курсора в разные стороны. Чтобы это смещение было интереснее - используем анимацию.
Эффект получился странный и бьет по глазам, но эти глюки легко настраиваются продолжительностью и отдалением дополнительных изображений от основного.
По желанию можно добавить на ховер дополнительных фотографий CSS фильтры.
|
1 2 3 4 5 6 7 |
<div class="glitch-hover"> <img src="photo.jpg" /> <img src="photo.jpg" /> <img src="photo.jpg" /> <img src="photo.jpg" /> <img src="photo.jpg" /> </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 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 |
.glitch-hover { margin: 10px 0; position: relative; overflow: hidden; display: inline-block; } .glitch-hover img { position: absolute; top: 0; left: 0; } .glitch-hover img:nth-of-type(1) { position: static; } .glitch-hover img:nth-of-type(2) { opacity: 0.2; } .glitch-hover img:nth-of-type(3) { opacity: 0.2; } .glitch-hover img:nth-of-type(4) { opacity: 0.2; } .glitch-hover img:nth-of-type(5) { opacity: 0.2; } .glitch-hover:hover img:nth-of-type(2) { animation: glitch-1 1s alternate infinite ease; } .glitch-hover:hover img:nth-of-type(3) { animation: glitch-2 1s alternate infinite ease; } .glitch-hover:hover img:nth-of-type(4) { animation: glitch-3 1s alternate infinite ease; } .glitch-hover:hover img:nth-of-type(5) { animation: glitch-4 1s alternate infinite ease; } @keyframes glitch-1 { 25% { top: 20px; } 50% { top: 5px; } 75% { top: 15px; } 100% { top: 0; } } @keyframes glitch-2 { 25% { top: -20px; } 50% { top: -5px; } 75% { top: -15px; } 100% { top: 0; } } @keyframes glitch-3 { 25% { left: 20px; } 50% { left: 5px; } 75% { left: 15px; } 100% { left: 0; } } @keyframes glitch-4 { 25% { left: -20px; } 50% { left: -5px; } 75% { left: -15px; } 100% { left: 0; } } |
Горизонтальные жалюзи:
В примере используется 5 одинаковых фото, как в заметке "Сдвиг частей фотографии в разные стороны". Только мы не сдвигаем части, а крутим на 360 градусов.
|
1 2 3 4 5 6 7 |
<div class="blind-hover"> <div><img src="photo.jpg" /></div> <div><img src="photo.jpg" /></div> <div><img src="photo.jpg" /></div> <div><img src="photo.jpg" /></div> <div><img src="photo.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 |
.blind-hover { margin: 20px 0; font-size: 0; letter-spacing: 0; } .blind-hover div { display: inline-block; overflow: hidden; width: 20%; transform: rotateY(0); transition: all 0.5s ease-out; } .blind-hover div img { width: 500%; max-width: 500%; position: relative; } .blind-hover div:nth-of-type(1) { transition-delay: 0; } .blind-hover div:nth-of-type(2) { transition-delay: 0.2s; } .blind-hover div:nth-of-type(3) { transition-delay: 0.4s; } .blind-hover div:nth-of-type(4) { transition-delay: 0.6s; } .blind-hover div:nth-of-type(5) { transition-delay: 0.8s; } .blind-hover div:nth-of-type(2) img { right: 100%; } .blind-hover div:nth-of-type(3) img { right: 200%; } .blind-hover div:nth-of-type(4) img { right: 300%; } .blind-hover div:nth-of-type(5) img { right: 400%; } .blind-hover:hover div { transform: rotateY(360deg); } |
Спиннер частей фотографии
В примере используются четыре фотографии, каждая из которых вращается при наведнии курсора мышки.
Пятая фотография служит для определения высоты и фоном в момент кручения
Эффект лучше всего смотрится на квадратных изображениях.
|
1 2 3 4 5 6 7 |
<div class="square-hover"> <img src="photo.jpg" /> <div><img src="photo.jpg" /></div> <div><img src="photo.jpg" /></div> <div><img src="photo.jpg" /></div> <div><img src="photo.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 |
.square-hover { margin: 20px 0; font-size: 0; letter-spacing: 0; position: relative; overflow: hidden; } .square-hover > img { width: 100%; } .square-hover div { overflow: hidden; width: 50%; height: 50%; left: 0; top: 0; position: absolute; transition: all 0.5s; } .square-hover div:nth-of-type(2) { left: 50%; } .square-hover div:nth-of-type(3) { top: 50%; } .square-hover div:nth-of-type(4) { top: 50%; left: 50%; } .square-hover div img { width: 200%; max-width: 200%; position: relative; } .square-hover div:nth-of-type(2) img { right: 100%; } .square-hover div:nth-of-type(3) img { bottom: 100%; } .square-hover div:nth-of-type(4) img { right: 100%; bottom: 100%; } .square-hover:hover div { transform: rotateZ(360deg); } |
Фотографии kellepics
Добавить комментарий: