(карта НАСТРОЕНА на экран >1200px)
INTERACTIVE MAP
Как сделать интерактивную карту в Tilda ZeroBlock
Сделаем интерактивную карту коттеджного посёлка реакцией при наведении на домики
1. Добавляем фото карты в ZeroBlock
2. Добавляем элементы ToolTip на домики, оформляем, заполняем карточки
3. Адаптируем под разные размеры
4. Добавляем стили в блок ДРУГОЕ►Т123
Ниже приведён код из этого примера
1. Добавляем фото карты в ZeroBlock
2. Добавляем элементы ToolTip на домики, оформляем, заполняем карточки
3. Адаптируем под разные размеры
4. Добавляем стили в блок ДРУГОЕ►Т123
Ниже приведён код из этого примера
<style>
/*Убираем тень от кружка и за даём плавность*/
.tn-atom__pin{
box-shadow: none !important;
transition:all 0.3s cubic-bezier(0, 0, 0.8, 1.0);
}
/*При наведении добавляем тень, заливку, меняем курсор*/
.tn-atom__pin:hover{
cursor:pointer;
background: rgba(255, 255, 255, 0.3);
box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.8)!important;
}
/*Задаём прозрачность для символа и подсказки*/
.tn-atom__pin-icon , .tn-atom__tip{
opacity: 0;
}
/*При наведении на символ делаем его видимым*/
.tn-atom__pin-icon:hover{
opacity: 1;
}
/*При наведении на кружок анимируем подсказку*/
.tn-atom__pin:hover .tn-atom__tip{
opacity: 1;
}
</style>
