JSFiddle - React, Tailwind, and code Playground

HTML

<div id="A"></div><div id="B"></div>

CSS

div {
    height: 100px;
    width: 100px;
    position: absolute;
    top: 0;
    left: 0;
    
    -moz-transition: opacity 4s; /* Firefox */
    -webkit-transition: opacity 4s; /* Safari and Chrome */
    -o-transition: opacity 4s; /* Opera */
    transition: opacity 4s;
}
#A {
    background: red;
    opacity: 1;
    z-index: 1;
}
#B {
    background: blue;
    opacity: 0;
    z-index: 2;
}
#B:hover {
    opacity: 1;
}