JSFiddle - React, Tailwind, and code Playground

by web tiki

HTML

<div class="one"></div>
<div class="two"></div>

CSS

body,html{
    height:100%;
}

div{
    height:50%;
    width:50%;
    position:relative;
    background-size:cover;
}
.one{
    background: url(http://lorempixel.com/output/fashion-q-c-640-480-3.jpg);
}
.two{
    background: url(http://lorempixel.com/output/people-q-g-640-480-7.jpg);
}
div:after{
    content:'';
    position:absolute;
    left:0; top:0;
    width:100%;
    height:100%;
    background:gold;
    opacity:1;
    
    -webkit-transition: opacity .5s;
    transition: opacity .5s;
}
div:hover:after{
    opacity:0;
}