Запишись на курс изучения CSS "Тильда на Стиле Light"
Записаться
Эффект зум вперед
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134100938 .t214__blockimg:hover {
    transform: scale(1.2);
}

/*#rec заменить на id вашего блока GL03*/
#rec134100938 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    transition: all 0.5s ease;
}

/*#rec заменить на id вашего блока GL03*/
#rec134100938 .t-col_4 {
    width: 360px;
    height: 360px;
    overflow: hidden !important;
    padding: 0px !important;
}
</style>
Эффект зум вперед + резкость
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134220639 .t214__blockimg:hover {
    transform: scale(1.2);
}

/*#rec заменить на id вашего блока GL03*/
#rec134220639 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    transition: all 0.5s ease;
}

/*#rec заменить на id вашего блока GL03*/
#rec134220639 .t-col_4 {
    width: 360px;
    height: 360px;
    overflow: hidden !important;
    padding: 0px !important;
}

</style>
Эффект зум назад
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134214986 .t214__blockimg:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*#rec заменить на id вашего блока GL03*/
#rec134214986 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

/*#rec заменить на id вашего блока GL03*/
#rec134214986 .t-col_4 {
    width: 360px;
    height: 360px;
    overflow: hidden !important;
    padding: 0px !important;
}
</style>
Эффект зум назад + резкость
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134221236 .t214__blockimg:hover {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/*#rec заменить на id вашего блока GL03*/
#rec134221236 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    -webkit-transform: scale(1.5);
    transform: scale(1.5);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

/*#rec заменить на id вашего блока GL03*/
#rec134221236 .t-col_4 {
    width: 360px;
    height: 360px;
    overflow: hidden !important;
    padding: 0px !important;
}
</style>
Эффект зум назад c поворотом
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134217178 .t214__blockimg:hover {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);

}

/*#rec заменить на id вашего блока GL03*/
#rec134217178 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}

/*#rec заменить на id вашего блока GL03*/
#rec134217178 .t-col_4 {
    width: 360px !important;
    height: 360px !important;
    overflow: hidden !important;
    padding: 0px !important;
}
</style>
Эффект зум назад c поворотом + резкость
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>
/*#rec заменить на id вашего блока GL03*/
#rec134221722 .t214__blockimg:hover {
    -webkit-transform: rotate(0) scale(1);
    transform: rotate(0) scale(1);

}

/*#rec заменить на id вашего блока GL03*/
#rec134221722 .t214__blockimg {
    background-size: cover !important;
    background-position: center !important;
    -webkit-transform: rotate(15deg) scale(1.4);
    transform: rotate(15deg) scale(1.4);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;

}

/*#rec заменить на id вашего блока GL03*/
#rec134221722 .t-col_4 {
    width: 360px !important;
    height: 360px !important;
    overflow: hidden !important;
    padding: 0px !important;
}
</style>
I am ready for a long road flight for work with a week- or months-long projects.
Эффект резкость при наведении
Это стандартный блок галерея GL03
Показать код 
<!--Добавить на страницу блок Т123 и в него поместить этот код. Опубликовать страницу-->

<style>

/*#rec заменить на id вашего блока GL03*/
#rec134219236 .t214__blockimg:hover {
    -webkit-filter: blur(0);
    filter: blur(0);
}

 /*#rec заменить на id вашего блока GL03*/
#rec134219236 .t214__blockimg {
    -webkit-filter: blur(3px);
    filter: blur(3px);
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}
</style>
Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.
Tilda Publishing
Made on
Tilda