JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" class="fadeBlack">
    <span class="blackBG">
        <p class="picDisc">TEST</p>
        <img src="http://www.mountainguides.com/photos/everest-south/c2_2011b.jpg" width=100% height=100%>
    </span>
</a>

CSS

.photoGallery img {
    background: #181818 no-repeat;
    border-radius: 10px;
}
.blackBG {
    position: relative;
    display: inline-block;
    border-radius: 10px;
}
.picDisc {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}
a.fadeBlack img {
    display: block;
    -webkit-transition: all 0.5s linear;
    -moz-transition: all 0.5s linear;
    -ms-transition: all 0.5s linear;
    -o-transition: all 0.5s linear;
    transition: all 0.5s linear;
}
a.fadeBlack:hover img {
    opacity: 0.6;
    background-color: #000;
}