Как сделать боковой вылет текста в блоке SV401 в Tilda

Как сделать боковой вылет текста в блоке SV401 в Tilda

1
Создали блок SV401 и задали такие настройки:
  • кол-во блоков в ряду - 2
  • Карточки -выравнивание - по левому краю/ вертикальное выравнивание - по верху
  • Цвет фильтра #000000 - 70% (верх и низ)
  • Анимация при наведении - Видимость контента - Показать контент сразу
2
Добавили код в блок Другое - Т123
Библиотека для примера
<style>
.t851__descr {
    max-height: 320px;
    overflow-y: auto;
}
.slidemode+div.t851__table_image-wrapper,
.slidemode .t851__bg
{ width: 30%}
.t851__button-container , .t851__textwrapper {
    width: 70%;
}
div[data-record-type="851"] ::-webkit-scrollbar-thumb {
        background: #b6142c;
        border-radius: 1px;
}
div[data-record-type="851"] ::-webkit-scrollbar {
        width: 3px;
        background: #efefef;
}
.t851__table { display: block}
img.t851__img { display: none}
.t851__link { height: 100%}

.t851__col {margin-bottom: 40px;}
.t851__container {
    display: flex;
    flex-wrap: wrap;
}
.t851__bg {width: 100%}
.t851__table {height: 100% !important}
.t851__button-bottom .t851__button-container {position: absolute}
.t851__button-container , .t851__textwrapper,
.t851__table_image-wrapper, img.t851__table_image , .t851__bg
{transition: all 0.5s ease-in-out}
.t851__textwrapper {
    background-color: #fff;
    height: auto;
}
.t851__button-bottom .t851__textwrapper { position: relative}
.t851__button-container {background-color: #fff}
.t851__button-container , .t851__textwrapper {
    transform: translateX(100%);
    box-sizing: border-box;
}
.t851__cell.slidemode .t851__button-container ,
.t851__cell.slidemode .t851__textwrapper {
    transform: translateX(0%);
}

.t851__overlay {opacity: 0.6}
.t851__cell:hover .t851__overlay { opacity: 1}
.t851__cell {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    cursor:pointer;
    padding-bottom: 90px;
    box-sizing: border-box;
}
.t851__button-bottom .t851__button-container { left: auto}
.t851__table_image-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: translateY(-100%);
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}
img.t851__table_image { 
    width: 60%;
    max-width: 210px;
}
.t851__table:hover .t851__table_image { transform: scale(1.1)}
.slidemode+div.t851__table_image-wrapper { width: 30%}

@media screen and (max-width: 960px){
.t851__col_mobile-grid {width: 100%}
}
@media screen and (max-width: 640px){
.t851__button-bottom .t851__button-container {right: 0px}
}
@media screen and (max-width: 460px){
.slidemode+div.t851__table_image-wrapper { width: 0%}
.t851__button-container , .t851__textwrapper {width: 100%}
}
</style>

<script>
$(document).ready(function(){
$('.t851__table').each(function(){
    let imgSrc = $(this).find('.t851__img').attr('data-original');
    $(this).append('<div class="t851__table_image-wrapper"><img class="t851__table_image" src="'+imgSrc+'"></div>');
    let btnUrl = $(this).parent('a.t851__link').attr('href');
    $(this).parent('a.t851__link').removeAttr('href');
    if (btnUrl){
    $(this).find('.t851__btn').wrap('<a class="t851__link_btn" href="'+btnUrl+'" target="">');
    };
});

$('.t851__cell').click(function(){
    if( $(this).hasClass('slidemode') ){
        $(this).toggleClass('slidemode');    
    }else{
        $('.t851__cell').removeClass('slidemode');
        $(this).toggleClass('slidemode');    
    };
});
});
</script>
Tilda Newsletter
Subscribe to our email newsletter for useful tips and valuable resources, sent out every month
Made on
Tilda