Подсвечивание карточек

Подсвечивание карточек

В этом видео я расскажу, как можно создать подсвечивание контура карточек, при наведении.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
31922558
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём карточку необходимых размеров и вешаем на неё класс "card"
Шаг 1
Ниже создаём блок T123 и добавляем код
Шаг 2
<!--Подсвечивание карточек-->
<!--https://mt-webdesign.ru/cards-light-->
<style>
/*Настройки карточек*/
:root {
--CardsBorderColor: #2A87C5, #8716c1, #FD79C0; /*цвет обводки карточки*/
--CardsBorderOpacity: 0.3; /*цвет обводки карточки*/
--CardsOpacity:1; /*цвет подсвечивания карточки, чем меньше прозрачность, тем более заметно*/
--CardsBorderRadius: 0px; /*радиус скругления углов*/
}
/*//////////////////////////////////////////////////////////////////////////////////////*/
.card {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--CardsBorderRadius);
}
.card:hover::before {
opacity: 1;
}
.card::before,
.card::after {
content: "";
height: 100%;
left: 0px;
opacity: 1;
position: absolute;
top: 0px;
transition: opacity 500ms;
width: 100%;
}
.card::before {
background: radial-gradient( 550px circle at var(--mouse-x) var(--mouse-y), var(--CardsBorderColor), transparent 50% );
z-index: 2;
padding: 2px;
left: -2px;
width: 100%;
top: -2px;
height: 100%;
zoom: 1 !important;
opacity:var(--CardsBorderOpacity);
border-radius: var(--CardsBorderRadius);
}
.card::after { 
background: radial-gradient(
500px circle at var(--mouse-x) var(--mouse-y), 
rgba(255, 255, 255, 0.4),
transparent 40%
border-radius: var(--CardsBorderRadius);
);
zoom: 1 !important;
z-index: 1;
}
.card > .tn-atom {
inset: 0px;
padding: 0px;
position: absolute;
z-index: 2;
opacity:var(--CardsOpacity);
border-radius: var(--CardsBorderRadius);
}
</style>
<script>
if(window.innerWidth > 1200) {
document.getElementById("allrecords").onmousemove = e => {
for(const card of document.getElementsByClassName("card")) {
const rect = card.getBoundingClientRect(),
x = e.clientX - rect.left,
y = e.clientY - rect.top;
card.style.setProperty("--mouse-x", `${x}px`);
card.style.setProperty("--mouse-y", `${y}px`);
};
}
};
</script>
Элементам внутри карточки ставим "pointer events - none"
Шаг 3
В коде меняем необходимые настройки
Шаг 4
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Эффект следа из изображений
Tilda
Анимация градиента на тексте
Tilda