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

Для разработчиков The Witcher 3 сюжет всегда был важнее сражений с монстрами
В разговоре с порталом Culture.pl о сюжете The Witcher 3 и о том, как разработчикам удалось перенести созданный Анджеем Сапковским мир в видеоигру, Марчин Блоха из CDPR заявил, что хорошее воображение — черта многих польских студий.

Игровые новости

29.12.2016

У EA нет планов по выпуску новой Battlefield в 2017 году
Какой бы успешной ни оказалась Battlefield 1, компания EA, похоже, все-таки не будет больше рисковать с попытками сделать франчайз ежегодным.

Игровые новости

29.12.2016

Counter-Strike: Global Offensive показали на движке Unreal Engine 4
Один из игровых дизайнеров под ником fuze опубликовал двухминутный ролик, в котором продемонстрировал игровой процесс Counter-Strike: Global Offensive от Valve на движке Unreal Engine 4.

Игровые новости

28.12.2016

В сеть утекла дата релиза Red Dead Redemption 2
На просторах всемирной паутины появились фотографии рекламных материалов для Red Dead Redemption 2. И здесь сотрудники Rockstar Games указали дату выхода своей новой игры.

Игровые новости

28.12.2016

Сюжетный директор CDPR не считает The Witcher примером искусства
В интервью порталу Culture.pl сюжетный директор CD Projekt RED Марчин Блаха рассказал, почему не считает The Witcher примером искусства.

Игровые новости

25.12.2016

Цены на рекламу на Igromen.Do.Am Рекламный блок

Мини-чат

Мы Вконтакте

Статистика сайта

Онлайн всего: 1

Гостей: 1

Пользователей: 0

На сайте: Никого нету

[ Пользователи за день ]

Софт-обозрение Мультимедиа Веб - дизайн Про Ucoz SEO Продвижение Заработок Мои статьи Counter-Strike

Увеличение изображения без 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;
}

Код картинки:

Код

Картинку:

Код

http://logo.ucoz.com/img/combo.png

Изменяете на свою.

Скрипты

04.01.2016 Автор: Димон Комментариев: 0 Рейтинг: 0.0 / 0 Просмотров: 425 Загрузок: 0

Поделись ссылкой с друзьями:

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

0 из 10
Проголосовало: 0

Нет комментариев, но вы можете стать первым, оставив свой комментарий

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

О портале Igromen.Do.Am

Контакты

В помощь пользователям