JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<div class="main">
    <div class="sub">sub</div>
    <div class="bg">
        <img src="http://lorempixel.com/g/400/200" />
    </div>
</div>

CSS

.main{
    width:400px;
    height:200px;
    position:relative;
}

.sub{
    width:400x;
    height:200px;
    background:green;
    position:absolute;
    top:0;
    left:0;
    z-index:-1;
    right:0;
    opacity:0;
     -webkit-transition: 1s background ease-in-out,1s opacity ease-in-out;
     transition:1s background ease-in-out, 1s opacity ease-in-out;
}
.main:hover .sub{
    background:grey;
    z-index:2;
    opacity:1;
   
}
.bg{
    width:200x;
    height:200px;
    background:red;
    position:absolute;
    top:0;
    z-index:1;
}
.main:hover .bg{
    z-index:-2;
}