<div id="spooky">
  <div id="ghost">
    <div id="left-eye"></div>
    <div id="right-eye"></div>
    <div id="blush"></div>
    <div id="blush2"></div>
  </div>
  <div id="wiggle">
    <div id="wiggle2"></div>
    <div id="wiggle3"></div>
    <div id="wiggle4"></div>
  </div>
</div>
body{
  background:#282828;
}

#spooky{
  width:160px;
  margin:0 auto;
  opacity: 1;   
  transition-duration: 1s;
  -moz-transition-duration: 1s;  
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
}
  #spooky:hover{
    opacity: 0;   
    transition-duration: 2s;
    -moz-transition-duration: 2s;  
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
}
#spooky:hover #blush{
  opacity:1;
}
    #spooky:hover #blush2{
      opacity:1;
    }


#ghost{
  background:#c0c0c0;
  width:160px;
  height:250px;
  margin: 0 auto;
  border-radius: 80px 80px 0px 0px;
}

#blush,#blush2{
  background:#EB5E7F;
  border-radius:50%;
  width:30px;
  height:10px;
  top:30px;
  left:18px;
  opacity:0;
  position:relative;
}
  #blush2{
    left:105px;
    top:20px;
  }


#left-eye, #right-eye{
  background:#282828;
  border-radius: 10px;
  height:30px;
  width:20px;
  top:50px;
  left:40px;
  position:relative;
}

  #right-eye{
    top: 20px;
    left: 95px;
  }

#wiggle{
  background:#c0c0c0;
  height:40px;
  width:40px;
  border-radius:50%;
  position:relative;
  top:-20px;
  left:-60px;
  margin:0 auto;
}
#wiggle2{
  background:#c0c0c0;
  height:40px;
  width:40px;
  border-radius:50%;
  position:relative;
  left:40px;
  margin:0 auto;
}
#wiggle3{
  background:#c0c0c0;
  height:40px;
  width:40px;
  border-radius:50%;
  position:relative;
  left:80px;
  top:-40px;
  margin:0 auto;
}
#wiggle4{
  background:#c0c0c0;
  height:40px;
  width:40px;
  border-radius:50%;
  position:relative;
  left:120px;
  top:-80px;
  margin:0 auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.