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

Question

[Дмитрий]

Нужно сделать, чтобы при наведение на изображение, появлялся блок снизу, а изображение поднималось, как тут

Сделал вот так:

код

<div class="work">
               <div class="img">
                <img src="img/port1.jpg" alt="port">
                <div class="img_info"></div>
                </div>
                <img src="img/port2.jpg" alt="port">
                <img src="img/port3.jpg" alt="port">
                <img src="img/port4.jpg" alt="port">
                <img src="img/port5.jpg" alt="port">
                <img src="img/port6.jpg" alt="port">
                <img src="img/port7.jpg" alt="port">
                <img src="img/port8.jpg" alt="port">
            </div>

.work {
    /*background-color: deeppink;*/
    width: 1440px;
    height: 514px;
    margin-top: 96px;
    overflow: hidden;
}

img[alt="port"] {
    display: block;
    float: left;
    width: 360px;
    height: 257px;
}

img[alt="port"]:hover {
    position: relative;
    bottom: 90px;
}

.work .img_info {
    display: none;
    background-color: #f0f0f0;
    width: 370px;
    height: 90px;
}

.img:hover .work .img_info {
    display: block;
}

но изображение прыгает при наведение на появляющейся блок, как сделать, чтобы оно не прыгало и можно было взаимодействовать с этим блоком.

А так же подскажите, как сделать, чтобы нижние изображения не перекрывали верхние

Answer 1

[yakupov112]

https://jsfiddle.net/6seamj2d/32/

Comments

[Дмитрий]

Спасибо:)