img-zoom-tl
img-zoom-tl
img-zoom-bl
img-zoom-br
img-zoom-non
img-zoom-rou
  1. Зайдём в Zero Blosk нажав кнопку редактировать
  2. Кликнем правой кнопкой мыши по фото и нажмём «Add CSS Class Name»
  3. Скопируем нужный класс и вставим его в появившейся слева ячейке
  4. На каждом примере стиля написан Класс (название стиля), где окончание tl = top left, tr = top right, bl = bottom left и так далее
  1. Зайдём в настройки сайта, нажмём «ещё» и пролистаем вниз, там будет вкладка CSS
  2. Откроем её, добавим туда код, который написан в конце этой статьи
  3. Сохраним и вернёмся на страницу сайта
Загрузим стили на свой сайт
Как применять стили к фото?
Примеры эффектов
img-zoom-tl
Названия классов
Рубрика: Простые красивые
SCC-эффекты для Tilda
zoom-Hover эффект
Как быстро сделать в Tilda стильный трендовый эффект для фото и иллюстраций с ассиметричными скруглениями? Добавив класс на любое изображение с помощью простого CSS при наведении фото будет увеличиваться
Обратите внимание, что эффект будет виден только на опубликованном сайте
Шаг 1
Шаг 2
Повторно загружать эти стили не нужно. Они загружаются один раз, и затем для добавления эффекта наведения к фотографиям достаточно просто применить соответствующий CSS-класс.
Шаг 2
Сохранить, опубликовать, открыть страницу

<style>
 /* верх лево */
 .img-zoom-tl {
    border-radius: 150px 0px 0px 0px;
    overflow: hidden;
}
.img-zoom-tl .tn-atom {
        transition: transform 400ms ease-in-out;
}
.img-zoom-tl:hover .tn-atom {
    transform: scale(150%);
}

 /* верх право */
 .img-zoom-tr {
    border-radius: 0px 150px 0px 0px;
    overflow: hidden;
}
.img-zoom-tr .tn-atom {
        transition: transform 400ms ease-in-out;
}
.img-zoom-tr:hover .tn-atom {
    transform: scale(150%);
}


 /* низ лево */ 
 .img-zoom-bl {
    border-radius: 0px 0px 0px 150px;
    overflow: hidden;
}
.img-zoom-bl .tn-atom {
    transition: transform 400ms ease-in-out;
}
.img-zoom-bl:hover .tn-atom {
    transform: scale(150%);
}


 /* низ право */ 
 .img-zoom-br {
    border-radius: 0px 0px 150px 0px;
    overflow: hidden;
}
.img-zoom-br .tn-atom {
    transition: transform 400ms ease-in-out;
}
.img-zoom-br:hover .tn-atom {
    transform: scale(150%);
}




 /* увеличение без скругления */ 
 
 .img-zoom-non {
    border-radius: 0px;
    overflow: hidden;
}
.img-zoom-non .tn-atom {
    border-radius: 0px;
    transition: transform 400ms ease-in-out;
}
.img-zoom-non:hover .tn-atom {
    transform: scale(150%);
}

 /* скругление при наведении */ 
 
 .img-zoom-rou {
    border-radius: 0px;
    overflow: hidden;
}
.img-zoom-rou .tn-atom {
    border-radius: 150px;
    transition: transform 400ms ease-in-out;
}
.img-zoom-rou:hover .tn-atom {
    transform: scale(150%);
}



</style>
Продукция высокого качества и демократичные цены.
Мы компания XX и много лет работаем в индустрии красоты и здоровья. Наша компания предлагает высококачественные товары по доступным ценам. Мы изготавливаем продукцию по новейшим технологиям, которая разрабатывается с учетом интересов наших клиентов. Мы стремимся предлагать покупателям максимально качественную продукцию и обслуживание. Наша служба поддержки всегда готова помочь вам подобрать подходящий продукт и ответить на все ваши вопросы.