JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

<div class="wrapper">
    
    <div class="light"></div>

<div class="headphones animate">
    <div class="hotspot"></div>
</div>

<div class="boombox animate">
    <div class="hotspot"></div>
</div>

</div>
<div class="black"></div>

CSS

body {margin: 0; padding:0;  }

.wrapper {position: absolute; width: 100%; height: 100%;background:url('http://stacy-sandbox.web01.sundaramdesign.com/dev-images/bg.png') #000 top center no-repeat;}
.black { width: 100%; height: 100%; background: black; opacity: .5; z-index:20;position: absolute;display: none;}


.light {position: absolute; top: 20px; left: 190px; width: 20px; height: 50px; background: yellow;border: 2px solid orange;z-index: 10;}

.headphones {position: absolute; top: 50px; left: 100px; width: 200px; height: 702px;background:url(http://stacy-sandbox.web01.sundaramdesign.com/dev-images/headphones.png); background-position: top center; z-index: 10;}
.headphones.hover {background-position: bottom center;}
.headphones .hotspot {width: 110px; height: 150px; opacity: .25;outline: 1px solid red; position: absolute; bottom:15px;left: 20px;}


.boombox {position: absolute; top: 70px; left: 200px; width: 500px; height: 300px; background:url(http://i.imgur.com/PXcj3FO.png); z-index: 10;}
.boombox.hover {background-image: url(http://i.imgur.com/FRJ4jBf.png);}
.boombox .hotspot {width: 100px; height: 100px; background: teal;opacity: .5; position: absolute; bottom:0; right: 0}

*.hover {z-index: 30;}

/*animations*/

.animate {
	-webkit-animation: pulser 2s linear infinite;
	-moz-animation: pulser 2s linear infinite;
	-o-animation: pulser 2s linear infinite;
	animation: pulser 2s linear infinite;

}


.pulse {
	-webkit-animation: pulser 2s 2s linear infinite;
	-moz-animation:pulser 2s 2s linear infinite;
	-o-animation: pulser 2s 2s linear infinite;
	animation: pulser 2s 2s linear infinite;

}



@-webkit-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fader {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

@-webkit-keyframes pulser {
  0%, 100%   {-webkit-transform: scale(1); transform:...

JavaScript

$('.hotspot').hover(
    function(){
        $(this).parent().removeClass('animate');
        $(this).parent().addClass('hover');
        $( ".black" ).show();
    },
    function() {
        $(".black").hide();
        $(this).parent().removeClass('hover');
        $(this).parent().addClass('animate');
  }
    
    

);