min-height transition

by writen

HTML

<a href="#" class="box">
    <img src="https://helpx.adobe.com/content/dam/help/en/flash/how-to/animate-cartoons-drawings-594x352.png" alt=""/>
    <div class="desc">
        Jakiś opis Lorem Ipsum!        
        Jakiś opis Lorem Ipsum!  
        Jakiś opis Lorem Ipsum! 
        Jakiś opis Lorem Ipsum! 
    </div>
</a>

CSS

.box {
    display: inline-block;
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px solid #4f4f4f;
    background: #FFF;
}

.box img {
    width: 100%;
}

.box .desc {
    width: 100%;
    background: #FFFFFF;
    position: absolute;
    bottom: 0;
    -webkit-transition: bottom 1s;
    transition: bottom 1s;
    
}

.box:hover .desc {
    bottom: 20px;
}