JSFiddle - React, Tailwind, and code Playground

HTML

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

CSS

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

.lay {
    overflow: hidden;
    background-blend-mode: multiply;
}

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

.lay:hover:after {
    height: 100%;
}