JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info">&nbsp;</div>
<div id="logo" class="mapa">
        <img name="map_logo" src="https://dl.dropbox.com/u/50123533/images/blank.png" width="500" height="500" border="0" id="map_logo" usemap="#m_map_logo" alt="3B STUDIO" />
    <map name="m_map_logo" id="m_map_logo">
        <area shape="poly" id="work" class="work" coords="238,1,354,115,284,186,223,129,57,295,1,238,1,1" alt="WORK" href="<?php bloginfo('url'); ?>/work" />
        <area shape="poly" id="store" class="store" coords="57,295,122,360,228,252,165,188" alt="3B STORE" href="<?php bloginfo('url'); ?>/store" />
        <area shape="poly" id="about" class="about" coords="165,187,223,129,284,185,228,252" alt="ABOUT 3B" href="<?php bloginfo('url'); ?>/about" />
        <area shape="poly" id="magazine" class="magazine" coords="1,238,1,498,258,498,204,443,309,337,229,250,123,360" alt="MAGAZINE DOBERMANN" href="<?php bloginfo('url'); ?>/magazine" />
        <area shape="poly" id="art" class="art" coords="238,1,354,114,229,251,309,337,447,209,498,262,498,1" alt="ART" href="<?php bloginfo('url'); ?>/art" />
        <area shape="poly" id="contacts" class="contacts" coords="204,443,257,499,499,499,498,261,447,208" alt="CONTACTS" href="<?php bloginfo('url'); ?>/contacts" />
    </map>
        
     </div>

CSS

#logo{
    width: 500px;
    height: 500px;
    background:url(https://dl.dropbox.com/u/50123533/images/logo.png) no-repeat;
    }
    .mapa{
            background-position: 0 0 !important;
    }
    .work{
            background-position: -500px 0 !important;
    }
    .store{
            background-position: -1000px 0 !important;
    }
    .about{
            background-position: 0 -500px !important;
    }
    .magazine{
            background-position: -500px -500px !important;
    }
    .art-home{
            background-position: -1000px -500px !important;
    }
    .contacts{
            background-position: 0 -1000px !important;
    }

JavaScript

$(document).ready(function() {
 
$('#work').hover(
      function() {
  $('#logo').addClass("work");
  $('#info').append($("<span>WORK</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("work");
  $('#info').find("span:last").remove();
    }
  );



$('#store').hover(
      function() {
  $('#logo').addClass("store");
  $('#info').append($("<span>STORE</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("store");
  $('#info').find("span:last").remove();
    }
  );

$('#about').hover(
      function() {
  $('#logo').addClass("about");
  $('#info').append($("<span>ABOUT</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("about");
  $('#info').find("span:last").remove();
    }
  );

$('#magazine').hover(
      function() {
  $('#logo').addClass("magazine");
  $('#info').append($("<span>MAGAZINE</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("magazine");
  $('#info').find("span:last").remove();
    }
  );

$('#art').hover(
      function() {
  $('#logo').addClass("art-home");
  $('#info').append($("<span>ART</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("art-home");
  $('#info').find("span:last").remove();
    }
  );    

$('#contacts').hover(
      function() {
  $('#logo').addClass("contacts");
  $('#info').append($("<span>CONTACTS</span>")).stop().animate({opacity: 1,}, 400 );
    },
      function() {
  $('#logo').removeClass("contacts");
  $('#info').find("span:last").remove();
    }
  );
 
});