Новая модификация «Видео в блоке ТЕ100 с анимацией активной карточки»
Коротко о модификации:
Это решение добавляет видео в карточки стандартного блока ТЕ100. При этом по наведению на карточку он с плавной анимацией увеличивается.
На странице модификации есть 3 решения:
1. На десктопе – видео проигрывается при наведении на карточку, на мобилке – при тапе
2. На десктопе – аналогично 1 варианту, на мобилке – автоматически
3. И там и там видео проигрываются автоматически
Ну а лучше всего увидеть своими глазами и применить на своём проекте по кнопке ниже
Это решение добавляет видео в карточки стандартного блока ТЕ100. При этом по наведению на карточку он с плавной анимацией увеличивается.
На странице модификации есть 3 решения:
1. На десктопе – видео проигрывается при наведении на карточку, на мобилке – при тапе
2. На десктопе – аналогично 1 варианту, на мобилке – автоматически
3. И там и там видео проигрываются автоматически
Ну а лучше всего увидеть своими глазами и применить на своём проекте по кнопке ниже
Смотрите обучающее видео на YouTube канале
Увеличение карточки при наведении в стандартном блоке
Standard set
A lunch set for a week / 1 person
$50
- Free delivery
- 1 type of set
- All ingredients included
Double set
A lunch set for a week / 2 persons
$70
- Free delivery
- Different types of sets
- All ingredients included
- Recipe inside
Special set
A set for a day for 1 person
$35
- Any dish from the menu
- Free delivery
- All ingredients included
Choose Your Plan
Make an order for a week or just for one day, and get free delivery
Standard set
A lunch set for a week / 1 person
$50
- Free delivery
- 1 type of set
- All ingredients included
Order now
Double set
A lunch set for a week / 2 persons
$70
- Free delivery
- Different types of sets
- All ingredients included
- Recipe inside
Order now
Special set
A set for a day for 1 person
$35
- Any dish from the menu
- Free delivery
- All ingredients included
Order now
Классы для модификации
444
Здесь вы можете скопировать готовый код и также почитать подробные комментарии к нему
<!--https://dsgnmax.ru/scale-card-hover--> <style>
/*Увеличение стандартной карточки при наведении*/
@media screen and (min-width: 1200px){
.t599__content{ /*Нужный класс блока из таблицы*/
transition: 0.4s ease-in-out; /*Длительность и плавность анимации*/
}
.t599__content:hover{
transform: scale(1.1); /*Размер увеличения карточки*/
}
}
</style> 