JSFiddle - React, Tailwind, and code Playground

by swfour

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;
        height:200px;
        line-height:200px;
        color: #1b9bff;
    }
    #articlebottom .imgWrap:hover .imgDescription1 {
        opacity: 1;
    }