JSFiddle - React, Tailwind, and code Playground

HTML

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

<script src="http://ricostacruz.com/jquery.transit/jquery.transit.js?v=14845"></script>

CSS

#A { background : blue; height : 100px; width : 100px;}
#B { background : red; height : 100px; width : 100px;}
#C { background : green; height : 100px; width : 100px;}

JavaScript

$(function() {
$("#A").mouseover( function() {
$("#A").transition({ opacity: '0'}, 500);}); });
$(function() {
$("#A").mouseout( 
function(){
$("#A").transition({ opacity: '1'}, 500);}); });

$(function() {
$("#B").mouseover( function() {
$("#B").transition({ opacity: '0'}, 500);}); });
$(function() {
$("#B").mouseout( 
function(){
$("#B").transition({ opacity: '1'}, 500);}); });

$(function() {
$("#C").mouseover( function() {
$("#C").transition({ opacity: '0'}, 500);}); });
$(function() {
$("#C").mouseout( 
function(){
$("#C").transition({ opacity: '1'}, 500);}); });