Увеличение (Zoom) картинок на CSS3

Разместил: Apocalypse
21 апреля 2016

Прикольное решение, которое позволяет увеличивать изображения при наведении курсора мышки. Всё выполнено на чистом CSS Для начала посмотрите ДЕМО Моё тестирование в редакторе: КЛИК Установка: 1#: В самый низ вашего CSS вставьте:

.grid-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 500px; overflow: hidden; position: relative; width: 700px; } .grid-item { height: 20%; width: 20%; } .grid-item:hover ~ img { height: 150%; width: 150%; } .grid-item:hover:nth-of-type(5n + 1) ~ img { left: 0px; } .grid-item:hover:nth-of-type(1n + 1) ~ .zoom-image { top: 0px; } .grid-item:hover:nth-of-type(5n + 2) ~ img { left: -50px; } .grid-item:hover:nth-of-type(1n + 6) ~ .zoom-image { top: -50px; } .grid-item:hover:nth-of-type(5n + 3) ~ img { left: -100px; } .grid-item:hover:nth-of-type(1n + 11) ~ .zoom-image { top: -100px; } .grid-item:hover:nth-of-type(5n + 4) ~ img { left: -150px; } .grid-item:hover:nth-of-type(1n + 16) ~ .zoom-image { top: -150px; } .grid-item:hover:nth-of-type(5n + 5) ~ img { left: -200px; } .grid-item:hover:nth-of-type(1n + 21) ~ .zoom-image { top: -200px; } .zoom-image { height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: all 0.25s; transition: all 0.25s; width: 100%; z-index: -1; } .grid-item { background-color: rgba(255, 254, 160, 0.15); } .grid-item:nth-of-type(2n) { background-color: rgba(52, 158, 175, 0.15); } .grid-wrapper { margin: 0 auto; }

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

.grid-wrapper { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; height: 500px; overflow: hidden; position: relative; width: 700px; } .grid-item { height: 20%; width: 20%; } .grid-item:hover ~ img { height: 150%; width: 150%; } .grid-item:hover:nth-of-type(5n + 1) ~ img { left: 0px; } .grid-item:hover:nth-of-type(1n + 1) ~ .zoom-image { top: 0px; } .grid-item:hover:nth-of-type(5n + 2) ~ img { left: -50px; } .grid-item:hover:nth-of-type(1n + 6) ~ .zoom-image { top: -50px; } .grid-item:hover:nth-of-type(5n + 3) ~ img { left: -100px; } .grid-item:hover:nth-of-type(1n + 11) ~ .zoom-image { top: -100px; } .grid-item:hover:nth-of-type(5n + 4) ~ img { left: -150px; } .grid-item:hover:nth-of-type(1n + 16) ~ .zoom-image { top: -150px; } .grid-item:hover:nth-of-type(5n + 5) ~ img { left: -200px; } .grid-item:hover:nth-of-type(1n + 21) ~ .zoom-image { top: -200px; } .zoom-image { height: 100%; left: 0; position: absolute; top: 0; -webkit-transition: all 0.25s; transition: all 0.25s; width: 100%; z-index: -1; } .grid-item { background-color: rgba(255, 254, 160, 0.15); } .grid-item:nth-of-type(2n) { background-color: rgba(52, 158, 175, 0.15); } .grid-wrapper { margin: 0 auto; }

  2#: Картинку оформляем следующим образом:

<div class="grid-wrapper"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <img alt="placeholder image" src="ССЫЛКА_НА_КАРТИНКУ" class="zoom-image" /> </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

<div class="grid-wrapper"> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <div class="grid-item"></div> <img alt="placeholder image" src="ССЫЛКА_НА_КАРТИНКУ" class="zoom-image" /> </div>

Автор публикации

не в сети 6 дней

Apocalypse

12

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1095Регистрация: 27-08-2018

Метки: CSS3ZoomЗумингКартинокУвеличение

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

• Следующая публикация Эффект калейдоскопа на HTML5 Canvas
• Предыдущая публикация Нейронная сеть на HTML5 Canvas

Вам может также понравиться...

• Свой фоновый рисунок для любого текста на CSS3

  Разместил: Apocalypse 20 августа 2016

  - Apocalypse 20 августа 2016

• Простое красивое увеличение изображений при наведении курсора через CSS3

  Разместил: Al-Sher 25 июля 2015

  - Al-Sher 25 июля 2015 Last modified 7 декабря 2015

• Плавное появление боков сайта на чистом CSS3 by Славик Краморенко

  Разместил: Apocalypse 16 февраля 2018

  - Apocalypse 16 февраля 2018

Подписаться

Уведомить о

новых последующих комментариях новых ответах на мои комментарии

Label

{} [+]

Имя*

Email*

Сайт

Δ

Label

{} [+]

Имя*

Email*

Сайт

Δ

0 Комментарий

Старые

Новые

Межтекстовые Отзывы

Посмотреть все комментарии