JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://yui.yahooapis.com/3.10.3/build/cssreset/cssreset-min.css">
<ul>
    <li>
        <img src="http://dummyimage.com/100x100/9ff/fff" alt="" />
        <figcaption>イメージ1</figcaption>
        <div class="status">
            <h3>SOLD!</h3>
        </div>
    </li>
    <li>
        <img src="http://dummyimage.com/100x100/393/fff" alt="" />
        <figcaption>イメージ２</figcaption>
        <div class="status">
            <h3>残り３つ</h3>
        </div>
    </li>
    <li>
        <img src="http://dummyimage.com/100x100/f88/fff" alt="" />
        <figcaption>イメージ3</figcaption>
        <div class="status">
            <h3>残りわずか!</h3>
        </div>
    </li>
</ul>

CSS

li {
    float: left;
    padding: 5px;
    margin-right: 1px;
    background: lightgray;
}
li img {
    display: block;
    vertical-align: bottom;
    margin-bottom: 5px;
}
figcaption {
    text-align: center;
    color: #555;

}
.status {
    opacity: 0;
    width: 100px;
    height:100%;
    position: absolute;
    -webkit-transition: opacity .5s ease-in;
    -moz-transition: opacity .5s ease-in;
    -o-transition: opacity .5s ease-in;
    transition: opacity .5s ease-in;
}
.status h3 {
    margin-top: 30px;
    padding: 5px;
    text-align: center;
    background: purple;
    color: #fff;
}
.status hover {
    opacity: .7;
    
}