JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
    <div class="block">
        <div class="wrap">
           
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
          
            <div class="text">這是說明100000000000000000000000000000000000000000000</div>
        </div>
    </div>
    <div class="block">
        <div class="wrap">
            <div class="picture">
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
            </div>
            <div class="text">這是說明2</div>
        </div>
    </div>
    <div class="block">
        <div class="wrap">
            <div class="text">這是說明3</div>
            <div class="picture">
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
            </div>
            
        </div>
    </div>
</div>
<div class="row">
    <div class="block">
        <div class="wrap">
            <div class="picture">
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
            </div>
            <div class="text">這是說明4</div>
        </div>
    </div>
    <div class="block">
        <div class="wrap">
            <div class="picture">
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
            </div>
            <div class="text">這是說明5</div>
        </div>
    </div>
    <div class="block">
        <div class="wrap">
            <div class="picture">
                <img src="http://www.w3school.com.cn/i/eg_cute.gif" />
            </div>
            <div class="text">這是說明6</div>
        </div>
    </div>
</div>

CSS

.block {
    width:50px;
    height:50px;
    padding:2px;
    margin:3px;
    border:solid;
    border-width:1px;
    float:left;
}
.wrap:hover {
    position:relative;
    top:-10px;
    left:-10px;
    height:50px;
    width:110px;
    padding:10px;
    background:rgba(256, 256, 256, 1);
    border:solid;
    border-width:1px;
    animation: wrap 0.5s;
    -webkit-animation: wrap 0.5s;
}
.text {
    display:none;
    height:50px;
    width:50px;
    float:left;
}
.picture {
    height:50px;
    width:50px;
    float:left;
}
.wrap:hover .text {
    display:block;
    -webkit-animation: text 1s;
    -animation: text 1s;
}
@keyframes wrap {
    from {
        background:rgba(256, 256, 256, 0);
    }
    to {
        background:rgba(256, 256, 256, 1);
    }
}
@keyframes text {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
@-webkit-keyframes wrap {
    from {
        background:rgba(256, 256, 256, 0);
    }
    to {
        background:rgba(256, 256, 256, 1);
    }
}
@-webkit-keyframes text {
    from {
        opacity:0;
    }
    to {
        opacity:1;
    }
}
.row {
    height:60px;
    margin:2px;
}