Увеличение изображения без JS на чистом CSS3
827материалов
228тем на форуме
3004комментария
6161пользователь

Увеличение изображения без JS на чистом CSS3


Введение:

Всем привет, вот и наступил Новый 2016 Год! Всех с наступившим праздником! Сегодня я выкладываю первый материал в этом году и как Вы уже поняли, речь у нас пойдет про изображения. Сейчас я Вам расскажу, про увеличения изображений при наведении на него, то есть когда пользователь наводит на картинку мышкой, она плавно увеличивается. Согласитесь, довольно не плохо и красиво будет смотреться. И делается это только с помощью CSS3, и довольно таки просто. Сейчас я Вам расскажу как это сделать.

Установка:

Для начала в Ваш CSS вставляете код:
Код
.zoom {
         border: 3px solid #ccc;
         overflow: hidden;
         position: relative;
         display: inline-block;
         width: 300px;
         height: 280px;
}
.zoom > div {
         height: 33.33%;
         width: 33.333%;
         z-index: 1;
         float: left;
         display: inline-block;
         position: relative;
}
.zoom__top.zoom__left:hover ~ .zoom__image {
         -webkit-transform: translate(20%, 20%) scale(1.5);
         transform: translate(20%, 20%) scale(1.5);
}
.zoom__top.zoom__centre:hover ~ .zoom__image {
         -webkit-transform: translate(0%, 20%) scale(1.5);
         transform: translate(0%, 20%) scale(1.5);
}
.zoom__top.zoom__right:hover ~ .zoom__image {
         -webkit-transform: translate(-20%, 20%) scale(1.5);
         transform: translate(-20%, 20%) scale(1.5);
}
.zoom__middle.zoom__left:hover ~ .zoom__image {
         -webkit-transform: translate(20%, 0) scale(1.5);
         transform: translate(20%, 0) scale(1.5);
}
.zoom__middle.zoom__centre:hover ~ .zoom__image {
         -webkit-transform: translate(0, 0) scale(1.5);
         transform: translate(0, 0) scale(1.5);
}
.zoom__middle.zoom__right:hover ~ .zoom__image {
         -webkit-transform: translate(-20%, 0) scale(1.5);
         transform: translate(-20%, 0) scale(1.5);
}
.zoom__bottom.zoom__left:hover ~ .zoom__image {
         -webkit-transform: translate(20%, -20%) scale(1.5);
         transform: translate(20%, -20%) scale(1.5);
}
.zoom__bottom.zoom__centre:hover ~ .zoom__image {
         -webkit-transform: translate(0, -20%) scale(1.5);
         transform: translate(0, -20%) scale(1.5);
}
.zoom__bottom.zoom__right:hover ~ .zoom__image {
         -webkit-transform: translate(-20%, -20%) scale(1.5);
         transform: translate(-20%, -20%) scale(1.5);
}
.zoom__image {
         -webkit-transition: all 1.5s ease;
         transition: all 1.5s ease;
         display: block;
         max-width: 100%;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         margin: auto;
}

.container {
         width: 100%;
         text-align: center;
}

Код картинки:
Код
<div class="container">
         <div class="zoom">
         <div class="zoom__top zoom__left"></div>
         <div class="zoom__top zoom__centre"></div>
         <div class="zoom__top zoom__right"></div>
         <div class="zoom__middle zoom__left"></div>
         <div class="zoom__middle zoom__centre"></div>
         <div class="zoom__middle zoom__right"></div>
         <div class="zoom__bottom zoom__left"></div>
         <div class="zoom__bottom zoom__centre"></div>
         <div class="zoom__bottom zoom__right"></div>
         <img class="zoom__image" src="http://logo.ucoz.com/img/combo.png" alt="">
         </div>
</div>

Картинку:
Код
http://logo.ucoz.com/img/combo.png
Изменяете на свою

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 02.01.2016 в 21:30
Материал просмотрен: 1078 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

Пожаловаться
Сказать спасибо
Источник

2 комментария


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта