JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<a href="#" id="fade"><span>HOME</span></a>

CSS

#fade {
    display: block;
    width: 400px;
    height: 280px;
    
    background: url(http://dummyimage.com/400x280/902863/ffffff);
}
#fade span {
    display: block;
    width: 400px;
    height: 280px;
    text-indent: -9999px;
    background: url(http://dummyimage.com/400x280/f7a3f7/ffffff);
    opacity: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
#fade:hover span {
    
    opacity: 1;
}