JSFiddle - React, Tailwind, and code Playground

by mojtaba

HTML

<div id="wrapper">

    <div class="photo">
        <div class="image"><img src="http://placekitten.com/200/220" /></div>
        <div class="size"><img src="http://placehold.it/200x40" /></div>
    </div>
    
</div>

CSS

.photo {
    position: relative;
    height: 220px;
    overflow: hidden;
    width: 200px;
}

.photo .image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}


.photo .size {
    position: absolute;
    height: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    margin-bottom: -40px;
    transition: margin-bottom 0.3s;
}

.photo .size.show {
    margin-bottom: 0;
}

JavaScript

$(function () {
    $('.photo')
        .on('mouseenter', function () {
            $(this).find('.size').addClass('show');
        })
        .on('mouseleave', function () {
            $(this).find('.size').removeClass('show');
        });
});