JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<div class="iWrap">

    <img src="http://lorempixel.com/g/80/110/" alt="" />

    <p>Lorem ipsum dolor sit amet.</p>

    <div class="caption"> Pliip Ploop Lorem ipsum dolor sit amet.</div>
</div>

<div class="iWrap">

    <img src="http://lorempixel.com/g/80/110/" alt="" />

    <p>Lorem ipsum dolor sit amet.</p>

    <img class="caption" src="http://lorempixel.com/g/200/110/" alt="" />
</div>

CSS

html { background: #555; }

.iWrap {
    float: left;
    clear: both;
    position: relative;
    border: 3px solid #e1e1e1;
    background: #f1f1f1;
    
    margin: 20px;
    padding: 10px;
}

.iWrap small { float: left; clear: both; }
.iWrap img { float: right; }

.caption {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    background: #f1f1f1;
    display: none;
    float: left;
}

JavaScript

$(".iWrap .caption").css({ 
    opacity: '0',
    display: 'block',
    width: '0', 
    height: '0' 
})

$(".iWrap").mouseenter(function(){
    
    $(this).find('.caption')
        .stop().animate({ 
            opacity: '1', 
            width: '100%', 
            height: '100%'   
        }, 666);
    
}).mouseleave(function(){
    
    $(this).find('.caption')
        .stop().animate({ 
            opacity: '0', 
            width: '0', 
            height: '0'   
        }, 666);
    
    
});