JSFiddle - React, Tailwind, and code Playground

by pixeloco

HTML

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

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

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

CSS

.light {position: absolute; top: 20px; left: 160px; width: 20px; height: 50px; background: yellow;border: 2px solid orange;}

.headphones {position: absolute; top: 50px; left: 100px; width: 128px; height: 397px;background:url(http://i.imgur.com/F3l992A.png);}
.headphones.hover {background-image: url(http://i.imgur.com/kUxLMoU.png);}
.headphones .hotspot {width: 128px; height: 120px; background: teal;opacity: .5; position: absolute; bottom:0;}


.boombox {position: absolute; top: 70px; left: 165px; width: 500px; height: 300px; background:url(http://i.imgur.com/PXcj3FO.png);}
.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}


/*animations*/
 .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;

}

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

}




/* 
.fadein {
	-webkit-animation: fader 2s linear 1;
	-moz-animation: fader 2s linear 1;
	-o-animation: fader 2s linear 1;
	animation: fader 2s linear 1;

} */

@-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: scale(1);}
  50%  {-webkit-transform: scale(.95); transform: scale(.95);}
}
@-moz-keyframes pulser {
  0%, 100%   {-moz-transform: scale(1); transform: scale(1);}
  50%  {-moz-transform: scale(.95;...

JavaScript

$('.hotspot').hover(function(){
    $(this).parent().toggleClass('hover animate');

})