Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
Как добавить картинку в блок Т228 в Tilda
 
BUILD THE SPACE
Learn more

Как добавить картинку в блок Т228 в Tilda

1
Создали блок T228
Включили в настройках - применять эффект в мобильной версии
2
Добавили код в блок Другое - Т123
В коде настроили задержку, длительность, размер картинки и ссылку на неё
Библиотека для примера

<style>
:root {
    --loader-duration: 1s; /*Длительность растворения*/
    --loader-delay: 3s; /*Задержка*/
}
/*Размер*/
.t-body:before {
    width: 450px;
    height: 450px;
}
@media (max-width:640px){
.t-body:before {
    /*Размер в мобильном*/
    width: 320px;
    height: 320px;
}
}
.t-records_animated {
    transition-duration: var(--loader-duration);
    transition-delay: var(--loader-delay);
}
.t-body:before {
    content: "";
    /*Ссылка на картинку*/
    background-image: url(https://static.tildacdn.com/tild3263-3438-4035-b461-663363663736/85c970700738855b9763.gif);
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 399;
    pointer-events: none;
    opacity: 1;
    animation: fade var(--loader-duration) calc( var(--loader-delay) - 0.5s ) ease-in-out forwards;
}
@keyframes fade {
  from {opacity: 1}
  to {opacity: 0}
}
</style>
Made on
Tilda