JSFiddle - React, Tailwind, and code Playground

HTML

<div class="imgcontainer">
    <a href="#">
        <img src="http://www.bigjimsburgers.com/burger.jpg" alt="" />
        <span class="desc">
            Centered Rollover Text
        </span>
    </a>
</div>

CSS

.imgcontainer {
        overflow: hidden;
        float: left;
        position: relative;
    }

    .imgcontainer img {
    float: left;
        padding: 5px;
    background: #fff;
        width: 500px;
        height: 500px;
    }

    .imgcontainer a .desc {
        display: none;
        font-size: 1.2em;
    }

    .imgcontainer a:hover {
        cursor: pointer;
        text-decoration: none;
    }

    .imgcontainer a:hover .desc {
        
        display: block;
                       
        text-align: center;   width:500px; line-height:500px;   
    background: #111;
    filter: alpha(opacity=75);
    opacity: .75;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
    color: #fff;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 500px;
        height: 500px;
    }