регистрация
856материалов
3341комментарий
239тем на форуме
7058пользователей

Увеличение изображения без 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
Материал просмотрен: 1481 раз
Категория материала: Скрипты для uCoz
К материалу оставлены: 2 комментария

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

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


e
Money Money @edqwerty2001 10.04.2016 16:582
0
Шикарно!!!
avatar
Хотите сайт всего за 10 дней?
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 4
Гостей: 4
Пользователей: 0