0

Есть блоки со скрытой информацией. При наведении на верхний, он увеличивается и показывается скрытая информация, но при этом нижний блок съезжает вниз.

css:

.content-list {
    display: inline-block;
}

    .book-wrap:hover {
        transform: scale(1.1);
        z-index: 999999;
        transition: transform .5s;
        cursor: pointer;
    }

    .read-more-target {
        display: none;
        overflow: hidden;
    }

    .point {
        opacity: 1;
    }

    .read-more-target,
    .point {
        transition: .25s ease;
    }

    .book-wrap:hover .point {
        opacity: 0;
    }

    .book-wrap:hover .read-more-target {
        font-family: Roboto;
        font-size: 14px;
        color: #000;
        font-weight: bold;      
        display: block;
        font-size: 100%;
    }

html:

<div class="content-list">
    <div class="book-wrap">
        <div class="hover">
            <p>Main text <span class="point" style="color: #000;">...</span></p>
        <span class="read-more-target">new text</span>
        </div>
        <img src="https://via.placeholder.com/200" alt="">
            <span>download</span>
        <a href="#"><i class="fa fa-download"></i></a>
    </div>    
    <div class="book-wrap">
        <div class="hover">
            <p>Main text <span class="point" style="color: #000;">...</span></p>
        <span class="read-more-target">new text</span>
        </div>
        <img src="https://via.placeholder.com/200" alt="">
            <span>download</span>
        <a href="#"><i class="fa fa-download"></i></a>
    </div>    
</div>  

Как сделать так, чтобы нижний не съезжал вниз, а верхний просто перекрывал его при наведении? Где тут ошибка? Я использовал z-index, но не помогло, не могу понять в чем проблема.

2
  • Ну так он и съезжает, потому что появляется скрытая информация, а вовсе не из-за увеличения. 11 мар 2019 в 8:55
  • @humster_spb как сделать так, чтобы блок с этой инфой был поверх другого?
    – Timur
    11 мар 2019 в 8:56

1 ответ 1

0

Как вариант, не скрывать/открывать .read-more-target, а менять по наведению его прозрачность:

.content-list {
    display: inline-block;
}

    .book-wrap:hover {
        transform: scale(1.1);
        transition: transform .5s;
        cursor: pointer;
    }

    .read-more-target {
        opacity: 0;
        overflow: hidden;
    }

    .point {
        opacity: 1;
    }

    .read-more-target,
    .point {
        transition: .25s ease;
    }

    .book-wrap:hover .point {
        opacity: 0;
    }

    .book-wrap:hover .read-more-target {
        font-family: Roboto;
        font-size: 14px;
        color: #000;
        font-weight: bold;      
        opacity: 1;
        font-size: 100%;
    }
<div class="content-list">
    <div class="book-wrap">
        <div class="hover">
            <p>Main text <span class="point" style="color: #000;">...</span></p>
        <span class="read-more-target">new text</span>
        </div>
        <img src="https://via.placeholder.com/200" alt="">
            <span>download</span>
        <a href="#"><i class="fa fa-download"></i></a>
    </div>    
    <div class="book-wrap">
        <div class="hover">
            <p>Main text <span class="point" style="color: #000;">...</span></p>
        <span class="read-more-target">new text</span>
        </div>
        <img src="https://via.placeholder.com/200" alt="">
            <span>download</span>
        <a href="#"><i class="fa fa-download"></i></a>
    </div>    
</div> 

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.