JSFiddle - React, Tailwind, and code Playground

by Johan Muller

HTML

<div class="item">
    
    <div class="item__inner">
        <p class="inner__add__big">пос. УКСМ, д. №5</p>
        <p class="inner__add__small">засвияжский район. ульяновск</p>
        
        <div class="inner__stat">
            <p class="inner__stat__title">текущее состояние</p>
            <p class="inner__stat__info">сдан в декабре 2010 г., оформлена собственность, заселён.</p>
        </div>
        
        <div class="inner__stat">
            <p class="inner__stat__title">текущее состояние</p>
            <p class="inner__stat__info">сдан в декабре 2010 г., оформлена собственность, заселён.</p>
        </div>
            
        <p class="inner__show">смотреть планировки</p>
    </div>
</div>

CSS

* { margin: 0px; padding: 0px; }

.item {
    display: block;
    position: relative;
    overflow: hidden;
    width: 250px;
    height: 350px;
    background: #ccc;
    border-bottom: 3px solid #11bb88;
}

.item__inner {
    display: block;
    position: absolute;
    left: 0px; bottom: 0px;
    width: 100%;
    min-height: 250px;
    margin-bottom: -350px;
    opacity: 0;
    text-align: center;
    background: yellow;
    transition: all 0.3s 0s;
}

.item:hover > .item__inner {
    margin-bottom: 0px;
    opacity: 1;
    transition: all 0.3s 0s;
}