<!--https://dsgnmax.ru/arrow-nav-ts104n-->

<style>
/*Соотношение сторон фотографий должно быть таким же, как и у шейпа*/

.photo > .tn-atom__sbs-anim-wrapper > .tn-atom{ /*Вместо класса .photo указываете свой, который привоите шейпу*/
        transition:0.4s all; /*Плавность анимации*/
        background-size:150% !important; /*Изначальный размер фотографии*/
        filter: brightness(100%); /*Изначальная яркость фотографии*/
        -webkit-filter: brightness(100%);
    }
    .photo > .tn-atom__sbs-anim-wrapper > .tn-atom:hover{
        /*transform:translateY(-30px);*/ /*Смещение карточки при наведении,если нужно*/
        transform:scale(1.05); /*Увеличение карточки при наведении*/
        -webkit-transform:scale(1.05);
        box-shadow: 0px 32px 24px rgba(0, 0, 0, 0.12); /*Тень при наведении*/
        filter: brightness(10%); /*Яркость фотографии при наведении*/
        -webkit-filter: brightness(10%);
        background-size: 100% !important; /*Размер фотографии при наведении*/
    }
</style>