Увеличение и последующее уменьшение объекта

Автор:
Nurlan Kemelbekov

Увеличение и последующее уменьшение объекта при наведении с использованием чистого CSS3. Простой стиль эффекта крутящегося масштабирования по наведению мыши.

Я уже показывал некоторые эффекты масштабирования в прошлых статьях. Например, такие как:
Простой способ плавного увеличения изображения при наведении курсора
Смена изображения при наведении курсора

Данная статья представляет собой продолжение этих статей. Цель: Создание простого стиля увеличение и последующее уменьшение объекта под влиянием наведения курсора мыши.
Поддержка браузеров: Попробуйте с последними версиями Firefox, Хром, Safari, Opera





Коды, которые совершают волшебство:

CSS3:
.zoom_div
{
text-align:center;
width:165px;
height:140px;
background:#ebbb2f;
color:#ffffff;
position:absolute;
font-weight:bold;
font-size:15px;
padding:10px;
float:left;
margin:5px;
-webkit-transition:-webkit-transform 3s,opacity 3s,background 3s,width 3s,height 3s,font-size 3s;
-webkit-border-radius:5px;
-o-transition-property:width,height,-o-transform,background,font-size,opacity;
-o-transition-duration:3s,3s,3s,3s,3s,3s;
-moz-transition-property:width,height,-o-transform,background,font-size,opacity;
-moz-transition-duration:3s,3s,3s,3s,3s,3s;
transition-property:width,height,transform,background,font-size,opacity;
transition-duration:3s,3s,3s,3s,3s,3s;
border-radius:5px;
opacity:0.6;
}
.zoom_div:hover
{
-moz-transform: rotate(-540deg) scale(-2);
-webkit-transform: rotate(-540deg) scale(-2);
-o-transform: rotate(-540deg) scale(-2);
transform: rotate(-540deg) scale(-2);
background:#ad2a56;
width:190px;
height:160px;
text-align:center;
font-size:20px;
border-radius:10px;
opacity:6;
}
HTML разметки:
<img src="listenmusic.jpg" alt="" class="zoom" />

Примечание: Этот эффект может быть применен для изображений с использованием того же кода.



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


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

* Copy This Password *

* Type Or Paste Password Here *

15 − 4 =

Я просто хотел сказать, как сильно я ценю Ваш комментарий на мой пост. Спасибо Вам !!