JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <head>
        <title></title>
    </head>
    <body>
        <div id="csshover">I use CSS3</div>
        <div id="jshover">I use JQuery</div>
    </body>
</html>

CSS

#csshover,#jshover{
    text-align:center;
    color:#fff;
    float:left;
    margin:5px;
    width:100px;
    height:100px;
    background-color:#000000;
    -webkit-transition:all 1s ease-in-out;
    -moz-transition:all 1s ease-in-out;
    -o-transition:all 1s ease-in-out;
     background-color:rgba(100,100,100,0);
}
#csshover:hover{
    background-color:rgba(100,100,100);
    opacity:0;
}

JavaScript

$(document).ready(function() {
    $("#jshover").mouseover(function() {
        $(this).animate({
            opacity: 0
        }, 300);
    }).mouseout(function() {
        $(this).animate({
            opacity: 1
        }, 300)
    });
});