JSFiddle - React, Tailwind, and code Playground

HTML

<div class="lay"></div>

CSS

.lay, .lay:after {
    position: relative;
    width: 640px;
    height: 410px;
    background: #fff url(http://habrastorage.org/files/d55/d66/a4b/d55d66a4bc534415be4a410729ccad07.jpg) no-repeat scroll left top;
}

.lay {
    background-blend-mode: luminosity;
}

.lay:after {
    content: ' ';
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.lay:hover:after {
    opacity: 1;
}