Портфолио
Услуги
Курсы
Бесплатно
Вход для студентов
ПЕРКОВА
Записаться на курс
Войти в лк

Эффекты для изображений
в Zero block

Обычное увеличение картинки, изменение цвета или прокрутку в Зеро-блоке можно сделать с помощью step-by-step анимации. Но что, если хочется добиться другого эффекта: когда вы наводите на изображение, размер изначальной области изображения не меняется, но при этом оно увеличивается (или уменьшается) или цвет всех изображений по умолчанию черно-белый,а по наведению у них оригинальные цвета. А может вы хотите задать прокрутку или анимацию в рамках контейнера.

Эта инструкция поможет легко и быстро добиться желаемого результата. Работает как с изображением, так и с шейпом.

  1. Задайте класс для изображения. Нужный класс написан под примером эффекта
  2. Задайте размер увеличения / уменьшения. Или оставьте их стандартными
  3. Выберите скорость увеличения / уменьшения (исчисляется в миллисекундах). Или оставьте их стандартными
  4. Если необходимо, укажите радиус скругления изображения (исчисляется в пикселях). Или оставьте их стандартными
  5. Скопируйте полученных код и вставьте в блок Т123 или в html-элемент в самом Zero-блоке.
Подробная видео-инструкция представлена выше
класс: coloron
<style>.coloron { filter: grayscale(100%); transition: .3s ease;
}.coloron:hover { filter: none;
}</style>
класс: coloroff
<style>
.coloroff {
transition: .3s ease;}
.coloroff:hover {
filter: grayscale(100%);}
</style>
класс: bluroff
<style>
.bluroff {
filter: blur(1px);
transition: .3s ease;}
.bluroff:hover {
filter: blur(0px);}
</style>
класс: bluron
<style>
.t396__elem.bluroff {
overflow: hidden;}
.bluroff .tn-atom {
filter: blur(3px);
transition: 0.2s ease;
transform: scale(1.01);}
.bluroff .tn-atom:hover {
filter: none;}
</style>
класс: zoomon
<style>
.t396__elem.zoomon {
overflow: hidden;}
.zoomon .tn-atom {
transition: all 0.5s ease;}
.zoomon .tn-atom:hover {
transform: scale(1.6);}
</style>
класс: zoomoff
<style>
.t396__elem.zoomoff {
overflow: hidden;}
.zoomoff .tn-atom {
transform: scale(1.6);
transition: 0.5s ease;}
.zoomoff .tn-atom:hover {
transform: none;}
</style>
класс: zoomrotateon
<style>
.t396__elem.zoomrotateon {
overflow: hidden;}
.zoomrotateon .tn-atom {
transition: 0.5s ease;}
.zoomrotateon .tn-atom:hover {
transform: scale(1.6) rotate(-20deg);}
</style>
класс: zoomrotateoff
<style>
.t396__elem.zoomrotateoff {
overflow: hidden;}
.zoomrotateoff .tn-atom {
transform: scale(1.6) rotate(-20deg);
transition: 0.5s ease;}
.zoomrotateoff .tn-atom:hover {
transform: none;}
</style>
класс: rotatecircle
<style>
.t396__elem.rotatecircle {
overflow: hidden;}
.rotatecircle {
transition: all 0.6s ease;}
.rotatecircle:hover {
border-radius: 100%;
transform: rotate(360deg);}
</style>
класс: circleon
<style>
.t396__elem.circleon {
overflow: hidden;}
.circleon {
transition: 0.5s ease;}
.circleon:hover {
border-radius: 100%;}
</style>
класс: circleoff
<style>
.t396__elem.circleoff {
overflow: hidden;}
.circleoff {
border-radius: 100%;
transition: 0.5s ease;}
.circleoff:hover {
border-radius: 0%;}
</style>

БЕСПЛАТНЫЕ МАТЕРИАЛЫ

    я уже хочу учиться
    куда платить деньги?
    Записаться на курс
    Воть сюда ^^
    ИП Перкова Катерина Константиновна
    ИНН 610304198965
    Публичная оферта
    Политика конфедициальности