Как правильно сверстать?

Question

[Степан Кормилин]

Добрый день! Видать торможу после выходных)) Как правильно сверстать такой блок? prntscr.com/i3sa8s
Дело в том, что при наведении на карточку в блоке с заголовком появляется ещё название категории. В свою очередь карточка при этом по высоте не должна менять размер, а средний блок с картинкой должен как бы сжиматься/перекрываться по вертикали. Заранее спасибо!

Answer 1

[Никита Кургин]

Ну с перекрытием всё просто:

<div class="block">
    Заголовок 1
    <div class="inner">
        Категория
    </div>
</div>

Элемент inner по умолчанию скрыт и появляется на ховере block.

.block {
    position: relative;
}

.block .inner {
    position: absolute;
    visibility: hidden;
    opacity: 0;
}

.block:hover .inner {
    visibility: visible;
    opacity: 1;
}

Comments

[Степан Кормилин]

Перекрытие к сожалению всё-таки не подходит, нужно именно сжатие среднего блока. Пробовал через flex свойства, но тоже не получается.