Блок	Контейнер	Карточка
TE100	.t686__col	.t686__table
TE105	.t336__table, .t336__block	.t336__cell
TE200	.t692 .t-container	.t692__col
TE210	.t649 .t-container	.t649__col
TE215	.t688__row	.t688__row .t-col_4
TE220	.t772__wrapper	.t772__col
TE225	.t774__container	.t774__col
TE230	.t902__row	.t902__col
TE400	.t422__container	.t422__wrapper
TE405	.t424__container	.t424__col
TE600	.t650__row	.t650__col
TE605	.t959__row	.t959__card
TE610	.t983__row	.t983__col
TE800	.t923 .t-slds__items-wrapper	.t923 .t-slds__item

<script>
// Анимация с первой карточкой
$("body").on("mouseover mouseout", '.card-triger-1', function(){
$('.card-1').toggleClass("card-show");
$('.text-card-3').toggleClass("text-card-3-right");
$('.text-card-2').toggleClass("text-card-2-right");
$('.card-triger-1').toggleClass("card-triger-1-show");
$('.card-2').toggleClass("card-hide-2");
$('.card-3').toggleClass("card-hide-3");
});
// Анимация со второй карточкой
$("body").on("mouseover mouseout", '.card-triger-2', function(){
$('.text-card-3').toggleClass("text-card-3-right");
$('.card-1').toggleClass("card-hide-1");
$('.card-2').toggleClass("card-show-2");
$('.card-triger-2').toggleClass("card-triger-2-show");
$('.card-3').toggleClass("card-hide-3");
});
// Анимация с третьей карточкой
$("body").on("mouseover mouseout", '.card-triger-3', function(){
$('.text-card-2').toggleClass("text-card-2-left");
$('.text-card-3').toggleClass("text-card-3-left");
$('.card-1').toggleClass("card-hide-1");
$('.card-2').toggleClass("card-hide-2-left");
$('.card-triger-3').toggleClass("card-triger-3-show");
$('.card-3').toggleClass("card-show-3");
});
</script>
<style>
/*Разрешения на которых будет работать скрипт (от 1024 до 2560px) */
@media only screen and (min-width : 1024px) and (max-width : 2560px) {
.card-1, .card-2, .card-3,
.card-1 .tn-atom, .card-2 .tn-atom, .card-3 .tn-atom,
.card-triger-1, .card-triger-2, .card-triger-3 {
transition-duration: 0.5s;
}
.text-card-2, .text-card-3 {
transition-duration: 0.5s;
}
.text-card-2-right {
transform: translateX(200px);
transition-duration: 0.5s;
}
.text-card-3-right {
transform: translateX(100px);
transition-duration: 0.5s;
}
.text-card-2-left, .text-card-3-left {
transform: translateX(-100px);
transition-duration: 0.5s;
}
.card-1:before, .card-2:before, .card-3:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
border-radius: 20px;
pointer-events: none;
background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 0%) 100%);
}
.card-show, .card-triger-1-show {
width: 560px !important;
transition-duration: 0.5s;
}
.card-show .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
.card-hide-1 {
width: 260px !important;
transition-duration: 0.5s;
}
.card-hide-2 {
transform: translateX(200px);
width: 260px !important;
transition-duration: 0.5s;
}
.card-hide-3 {
transform: translateX(100px);
transition-duration: 0.5s;
width: 260px !important;
}
.card-show-2, .card-triger-2-show {
transform: translateX(-100px);
width: 560px !important;
transition-duration: 0.5s;
}
.card-show-2 .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
.card-hide-2-left {
transform: translateX(-100px);
width: 260px !important;
transition-duration: 0.5s;
}
.card-show-3, .card-triger-3-show {
transform: translateX(-200px);
width: 560px !important;
transition-duration: 0.5s;
}
.card-show-3 .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
}
</style>