Вход Регистрация
Украшения 07.09.2017 3 2163
Плавное увеличение картинок

Плавное увеличение картинок

А вот ещё один простенький скрипт для ваших фотографий и картинок. При наведении на них курсора мыши изображения начнут плавно увеличиваться в размере.

Весьма элегантное решение для внешнего дизайна сайта, которое подойдёт для фотобанка и для агентства недвижимости, для интернет-магазина и для сайта-визитки. Применение этому скрипту вы наверняка найдёте и сами. Главное — не перестарайтесь, ведь какой бы изящной эта функция вам ни казалась, всего должно быть в меру. Скрипт легко встраивается на сайт, не замедляет его работу и обладает совместимостью со всеми остальными функциями из нашей библиотеки. Совмещайте его с другими нашими решениями и создавайте собственный уникальный стиль.

 


Установка

Перейдите в панель управления вашего сайта в раздел «Свой код». В редактор вставьте один из следующих кодов:


Первый вариант. (В этом варианте предусмотрена более плавная анимация, но это решение также изменяет анимацию слайдов в виджетах "Галерея" и "Слайдер", а также изменяет загрузку вашего сайта на более плавную):
 

Код
<style>
img:hover {
    border: 0;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
</style>

 

Второй вариант. (Более резкая анимация, которая не задевает другие виджеты, кроме картинок):

 

Код
<style>
img:hover {
    border: 0;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;  
}
</style>

 

Во вкладке «Настройки» в разделе «Выводить код» отметьте пункт «В <head>». (скриншот).
Сохраните код и опубликуйте ваш сайт.

 


Установить сторонний код на ваш сайт, вы можете на тарифе «Про». Ознакомиться с тарифом вы можете на следующей странице: blog-ru.ukit.com/updates/tariffs. Также отмечу, что вы можете обратиться в службу поддержки uKit за помощью в установке кода на тарифах «Премиум» и выше, через раздел «Помощь» (скриншот). 
Демо страница Написать автору статьи Донат автору
Похожие материалы:
Всего комментариев: 3
avatar
0 Спам
1
Здравствуйте, подскажите как отключить анимацию картинок в мобильной версии ? второго варианта.
<style>
img:hover {
    border: 0;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -webkit-transition: all 1s ease-out;
    transition: all 1s ease-out;  
}
</style>
avatar
0 Спам
2
Так как потом нету адаптации, страница ездит по сторонам.
avatar
0
3
Здравствуйте, замените код на следующий.

Код
<style>
     @media (min-width: 768px) {
img:hover {  
     border: 0;  
     -webkit-transform: scale(1.1);  
     -moz-transform: scale(1.1);  
     -o-transform: scale(1.1);  
     transform: scale(1.1);  
     -webkit-box-sizing: border-box;  
     -moz-box-sizing: border-box;  
     box-sizing: border-box;  
     -moz-transition: all 1s ease-out;  
     -o-transition: all 1s ease-out;  
     -webkit-transition: all 1s ease-out;  
     transition: all 1s ease-out;    
       }
   }
</style>
Войдите:
avatar