Как сделать фон при наведении в аккордеоне в Tilda
About our clients
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
Products
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
Interesting
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
Our Team
We are the leading firm by delivering quality and value to our clients. All our professionals have more than 5 years of legal experiences. We like what we do.
Good Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night. Also you can visit our office for personal consultation.
Individual Approach
Our company works according to the principle of individual approach to every client. This method lets us to get success in problems of all levels.

Как сделать фон при наведении в аккордеоне в Tilda

1
Создали блок TX16N
2
Для описания задали в типографике цвет белый
3
Добавили код в блок Другое - Т123
Библиотека для примера
<style>
.t585__accordion {
position: relative;
overflow: hidden;
}
.t585 .t-col , .bgblk , .t585__title , svg g   {
    -webkit-transition:   all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
    -moz-transition: all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
    -o-transition:  all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
    transition: all 0.3s cubic-bezier(0.1, 0.3, 0.2, 0.5) 0.2s;
}
.t585 .t-col:hover .bgblk , .openA .bgblk {
  top:0%;
}
.t585__circle {
    background-color: transparent !important;
}
.t585 .t-col:hover svg g, .openA svg g {
  stroke:#fff !important;
}
.t585 .t-col:hover .t585__title , .openA .t585__title {
   color: #fff !important;
}
.bgblk {
    position: absolute;
    top: 100%;
    width: 100%;
    height: 100%;
    background-color: #121820;
    z-index: -1;
}
.t585__textwrapper , .t585__title {
padding-left: 15px;
}

.t585__textwrapper {
    opacity:0;
     moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition:  all 1s ease-in-out;
    -moz-transition:  all 1s ease-in-out;
    -o-transition:  all 1s ease-in-out;
    transition: all 1s ease-in-out;
}
.openA .t585__textwrapper {
    moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -webkit-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    opacity:1;
}
</style>
<script>
$(document).ready(function(){
    $('.t585 .t585__accordion').append('<div class="bgblk"></div>');
    $('.t585 .t-col').click(function(){
       $(this).toggleClass('openA');
    });
});
</script>
Made on
Tilda