JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://malsup.github.com/jquery.cycle2.js"></script>
<div class="map"></div>

<div class="flight"></div>
<div class="flight1"></div>
<div class="flight3"></div>

<div class="blurry">
<img src="http://wasterecords.com/octave/globe_blur.png" />
</div>
<div style="position:fixed !important;bottom:0px !important;right:0px !important;z-index: 0 !important;height:582px;width:425px;display:none;" class="cycle-slideshow" 
    data-cycle-fx="none"
    data-cycle-speed="60"
    data-cycle-timeout="1"
    data-cycle-easing="linear"
    data-cycle-loader="wait"
    >
    <img src="http://wasterecords.com/octave/images/globus-website01_00000.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00001.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00002.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00003.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00004.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00005.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00006.gif">
    <img src="http://wasterecords.com/octave/images/globus-website01_00007.gif">
   
</div>

CSS

.flight {
	 top: 0;
    bottom: 0;
    left: 0;
    right: 0;
	position:fixed;
	background: url(http://wasterecords.com/octave/web_symetrie_slice01.jpg) no-repeat center fixed; 
	background-size: cover;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */
  z-index: -2;	
}
.flight1 {
	position:fixed;
	display:none;
	background: url(http://wasterecords.com/octave/web_symetrie_slice01_blur.jpg) no-repeat center fixed; 
	background-size: cover;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */	
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}
.flight3 {
	position:fixed;
	background: url(http://wasterecords.com/octave/up-2-2.png) no-repeat center fixed; 
	background-size: cover;
  -webkit-background-size: cover; /* pour Chrome et Safari */
  -moz-background-size: cover; /* pour Firefox */
  -o-background-size: cover; /* pour Opera */
  background-size: cover; /* version standardisée */	
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10000 !important;
}
body,td,th {
	color: #000;
}
.blurry {
	position:fixed !important;
	bottom:0px !important;
	right:0px !important;
	z-index: 0 !important;
	height:582px;
	width:425px;
	
	}
	.map {
	position:fixed !important;
	bottom:0px !important;
	right:0px !important;
	z-index: 10001 !important;
	height:582px;
	width:425px;
	
	}

JavaScript

$(".map").on("mouseenter mouseleave",
    function(e) {
        if(e.type == "mouseenter"){
            $('.flight1,.cycle-slideshow').fadeIn();
        }
        else{
            $('.flight1,.cycle-slideshow').fadeOut();
        }           
    });