<figure>
  <img class="map" src="https://communitymeetings.files.wordpress.com/2014/11/igraphbmap.jpg" />
  <img class="arabic" src="https://communitymeetings.files.wordpress.com/2014/12/igrapharabic.png" alt="" />
  <img class="korean" src="https://communitymeetings.files.wordpress.com/2014/12/igraphkorean.png" alt="" />
  <img class="russian" src="https://communitymeetings.files.wordpress.com/2014/12/igraphrussian.png" alt="" />
  <img class="tagalog" src="https://communitymeetings.files.wordpress.com/2014/12/igraphtagalog.png" />
  <img class="spanish" src="https://communitymeetings.files.wordpress.com/2014/11/igraphspanish.png" />
  <img class="polish" src="https://communitymeetings.files.wordpress.com/2014/11/igraphpolish.png" />
  <img class="chinese" src="https://communitymeetings.files.wordpress.com/2014/11/igraphchinese.png" />
    <img class="african" src="https://communitymeetings.files.wordpress.com/2014/11/igraphafrican1.png" />
  <ul>
    <li id="showsp">Spanish  <div id="dot1"></div></li>
    <li id="showpo">Polish  <div id="dot2"></div></li>
    <li id="showch">Chinese  <div id="dot3"></div></li>
    <li id="showaf">African languages  <div id="dot4"></div></li>
    <li id="showar">Arabic  <div id="dot5"></div></li>    
    <li id="showkr">Korean  <div id="dot6"></div></li>   
    <li id="showru">Russian  <div id="dot7"></div></li>       
    <li id="showtg">Tagalog  <div id="dot8"></div></li>   
  </ul>
    <h1>Where are you more likely to hear these languages in Chicago?</h1>
  
</figure>
@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,700);

figure{
  position:relative;
  width: 400px;
  height: 514px;
  border: 1px solid black;
  margin: 50px auto;
  overflow: visible;
}

img {width: 400px;}

.map
{z-index: -10}

h1
{position:absolute;
top: 23px;
left: 330px;
  right: 15px;
font-family:"Roboto"; font-weight: 100; font-size: 13px;}

li
{
list-style: none;
text-align: right;
font-family: "Roboto"; 
  font-weight: 400;
  font-size: 13px;
}

.arabic, .russian, .korean, .tagalog, .spanish, .polish, .chinese, .african { position:absolute; top:0; left:0; opacity: 0;}

ul{position: absolute; top:15px; right: 80px;
line-height: 20px;
color: #a57e7e;}

div{display: inline-block;}

#dot1 {
    background: #d6eece;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot2 {
    background: #ffefd9;
   width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot3 {
    background: #ffd0cc;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot4 {
    background: #ccd1ea;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot5 {
    background: #31e2df;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot6 {
    background: #ff9e63;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot7 {
    background: #708b9b;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

#dot8 {
    background: #b34fa1;
    width: 10px;
    height: 10px;
    border-radius: 50%;
  box-shadow: -2px 1px 6px #b3adad;
}

function showspanish (){
  TweenMax.to('.spanish', 2, {alpha:0.8});
};

function showpolish (){
  TweenMax.to('.polish', 2, {alpha:0.8});
};

function showchinese (){
  TweenMax.to('.chinese', 2, {alpha:0.8});
};

function showafrican (){
  TweenMax.to('.african', 2, {alpha:0.8});
};

function showarabic (){
  TweenMax.to('.arabic', 2, {alpha:0.8});
};

function showkorean (){
  TweenMax.to('.korean', 2, {alpha:0.8});
};

function showrussian (){
  TweenMax.to('.russian', 2, {alpha:0.8});
};

function showtagalog (){
  TweenMax.to('.tagalog', 2, {alpha:0.8});
};

function outspanish (){
  TweenMax.to('.spanish', .5, {alpha:0, delay:0.2});
};

function outpolish (){
  TweenMax.to('.polish', .5, {alpha:0, delay:0.2});
};

function outchinese (){
  TweenMax.to('.chinese', .5, {alpha:0, delay:0.2});
};

function outafrican (){
  TweenMax.to('.african', .5, {alpha:0, delay:0.2});
};

function outarabic (){
  TweenMax.to('.arabic', .5, {alpha:0, delay:0.2});
};

function outkorean (){
  TweenMax.to('.korean', .5, {alpha:0, delay:0.2});
};

function outrussian (){
  TweenMax.to('.russian', .5, {alpha:0, delay:0.2});
};

function outtagalog (){
  TweenMax.to('.tagalog', .5, {alpha:0, delay:0.2});
};

$('#showsp').hover(showspanish, outspanish);
$('#showpo').hover(showpolish, outpolish);
$('#showch').hover(showchinese, outchinese);
$('#showaf').hover(showafrican, outafrican);
$('#showar').hover(showarabic, outarabic);
$('#showkr').hover(showkorean, outkorean);
$('#showru').hover(showrussian, outrussian);
$('#showtg').hover(showtagalog, outtagalog);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js