Как сделать чтобы текст появлялся когда картинка по центру в карусели?

Question

[ijesusyt]

Сейчас у меня появляется при наведении текст, а как сделать, чтобы появлялся, когда картинка по центру
futurehd3fg.tilda.ws/page32407260.html

<style>
    .img-hover-1,
    .img-hover-1 .tn-atom,
    .img-hover-1 img {
        overflow:hidden;
        transition:all .3s ease-in-out!important;
        cursor:pointer;
    }
    .img-hover-1 > .tn-atom {
        background: #000;
    }
    .img-hover-1:hover img {
        transform: scale(1.1);
        opacity: 0.4;
    }
    .img-hover-1:hover .content-layer-1 {
        top:80%;
        opacity:1;
    }
    .content-layer-1 {
        position: absolute;
        width: 100%;
        height: 100%;
        display: block;
        left: 0;
        top: 100%;
        transition:all .3s ease-in-out!important;
        opacity:0;
    }
    .content-layer-1 h3 {
        font-family: 'CeraPro',Arial,sans-serif;
        font-weight: 700;
        font-size: 14px;
        line-height: 1;
        color: #fff; 
        padding: 0% 5%;
    }
    .content-layer-1 p {
        font-family: 'CeraPro',Arial,sans-serif;
        line-height: 1.2;
        font-size: 14px; 
        margin-top: 5px;
        color: #fff; 
        padding: 0% 5%;
    }
</style>
<script>
        $('.img-hover-1 .tn-atom').append('<div class="content-layer-1"><h3>БИЗНЕС ЦЕНТР PLAZA,</h3><p>АСТАНА</p></div>');
</script>

Comments

[Ankhena]

Зачем дублировать вопрос?

[Ankhena]

У центрального слайда есть уникальный класс center.
Вот и показывайте свой текст, когда есть этот класс.