JSFiddle - React, Tailwind, and code Playground

HTML

<article id="articlebottom">
                    <div class="products">
    
                        <div class="imgWrap">
                            <a href="Products/Camphor.aspx"  target="_blank"><img src="http://t0.gstatic.com/images?q=tbn:ANd9GcTA1uJ8WQ7fiJ2cbdoMph39XIJYQztt6FWoxfkk32gwnOz0qcmjyg" alt="polaroid" />
                            <p class="imgDescription1">Camphor</p></a>
                        </div>
                        </div>
    </article>

CSS

#articlebottom {
        width: 980px;
        height: 250px;          
    }
    
    .products{
        width:980px;
        margin:0px auto;
        padding-left:20px;
    } 
    #articlebottom .imgWrap {
        width:295px;
        height:200px;
        position:relative;
        float:left;
        margin:10px;
        background:#333;
    }
    #articlebottom .imgWrap img {
        position:absolute;
        left:5px;
        top:5px;
        width:285px;
        height:200px;
    }
    
    #articlebottom .imgDescription1 {
        position: absolute;
        left:0;
        letter-spacing: 2px;
        background-color: rgba(255, 250, 250, 0.2);
        color: rgba(255, 250, 250, 0.2);
        font-weight:bold;
        font-size:18pt;
        line-height: 50px;
        width:100%;
        height:50px;
        opacity: 0;
        text-align:center;
        text-transform:uppercase;
    	transition:opacity 500ms ease-in-out, color 20ms ease-in-out,height 500ms ease-in-out;
    }
    
    #articlebottom .imgWrap:hover .imgDescription1 {
        opacity: 1;
        height:200px;
        line-height:200px;
        color: #1b9bff;
    }