JSFiddle - React, Tailwind, and code Playground

by Glynne Turner

HTML

<div class="holder">

<div class="intro">
    <div class="info">
        <div class="info-txt">dfghgfcbghd
            <br />sdfsdfsdfsdfsdfsdfsdf dsfsdfsdf sdf sd fsd f</div>
    </div>
    <div class="intro_bg"></div>
</div>
<div class="intro">
    <div class="info">
        <div class="info-txt">dfghgfcbghd
            <br />sdfsdfsdfsdfsdfsdfsdf dsfsdfsdf sdf sd fsd f</div>
    </div>
    <div class="intro_bg"></div>
</div>
</div>

CSS

body, html {

    margin:0;

    padding:0;

}

.intro {

    margin:20px;

    width: 300px;

    height: 200px;

    border:2px solid black;

    position:absolute;

    overflow:hidden;

}

.holder{
  position:relative; display:inline-block
}
.info {

    width:inherit;

    height: inherit;
 

    overflow:hidden;

    background-color:rgba(0, 0, 0, 0.7);

    z-index:5;

    display:none;

}

.info-txt {

    color:#ffffff;

    cursor:default;

    background-color:#000000;

    padding:20px;
 

    bottom:0;

}

.intro_bg {

    top:0;

    bottom:0;

    left:0;

    right:0;

    background: url(http://dummyimage.com/600x400/f00/fff) no-repeat center center;

    background-size: cover;
 

}

JavaScript

$('.intro').hover(function () {
    $('.intro_bg').animate({
        'width': '150%',
            'height': '150%',
        'margin': '-25%'
    });
    $('.info').slideDown();
}, function () {
    $('.info').slideUp();
    $('.intro_bg').animate({
        'width': '100%',
            'height': '100%',
        'margin': '0%'
    });
});