JSFiddle - React, Tailwind, and code Playground

HTML

<div id="brightnessfilter">
    <div id="transparent">
        <span id="text">Random AFFECTED text (it glows)</span>
    </div>
</div>

CSS

#brightnessfilter {
    width:700px;
    height:465px;
    background-image:url('http://i42.tinypic.com/351dff5.jpg');

}

#brightnessfilter:hover {
     -webkit-filter: brightness(1.3);
-moz-filter: brightness(1.3);
-o-filter:  brightness(1.3);
-ms-filter:  brightness(1.3);
}

#brightnessfilter:hover #text {
     -webkit-filter: brightness(0.8);
-moz-filter: brightness(0.8);
-o-filter:  brightness(0.8);
-ms-filter:  brightness(0.8);
}

#transparent {
    position:relative;
    top:400px;
    width:700px;
    height:65px;
    background-color:rgba(0,0,0,.5);
    border-radius:8px;
}

#text {
    color:white;
    font-weight:bold;
    position:relative;
    top:9px;
    left:9px;
    font-size:16px;
}

#replace:hover {
    background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.01) 0%,rgba(255,255,255,0.01) 100%), url('http://i40.tinypic.com/2cft7dl.jpg');
}