<div id="container">
<div class="item">

      <h1>D</h1>
<div class="tooltip">
  <p>Find important documents and manuals.</p>
  <div class="arrow"></div>
  </div>
  </div>
</div>
  
  <div class="item">
      <h1>A</h1>
    
    <div class="tooltip">
  <p>Take a look at our crew and become a friend.</p>
  <div class="arrow"></div>
  </div>
  </div>
</div>
  
  <div class="item">
      <h1>C</h1>
    <div class="tooltip">
  <p>Explore our process and see how we can help.</p>
  <div class="arrow"></div>
  </div>
  </div>
@font-face {
    font-family: 'HeydingsCommonIconsRegular';
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot');
    src: url('http://ianfarb.com/random/heydings_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.woff') format('woff'),
         url('http://ianfarb.com/random/heydings_icons-webfont.ttf') format('truetype'),
         url('http://ianfarb.com/random/heydings_icons-webfont.svg#HeydingsCommonIconsRegular') format('svg');
    font-weight: normal;
    font-style: normal;

}


*      {margin: 0; padding: 0;}


body {  background:#e7e7e7;}

#container
       {width:400px;
        margin:100px auto 0 auto;}

.item  {width:96px;
        height:96px;
        border:2px solid #73a058;
        margin:15px;
        background:#73a058;
        float:left;
        border-radius:50px;
        -webkit-transition: .25s ease;}

h1    {font-family:'HeydingsCommonIconsRegular', sans-serif;
       font-weight:normal;
       margin:30px 0 0 0;
       color:#fff;
  text-align:center;
       font-size:60px;
       line-height:30px;}

.tooltip p { font-family: sans-serif;
             font-size:14px;
  font-weight:300;}

.tooltip { width:120px;
           padding:10px;
           border-radius:3px;
           position:absolute;
           box-shadow:1px 1px 10px 0 #ccc;
           margin: -500px 0 0 -20px;
           background:#fff;
           -webkit-transition:margin .5s ease-in-out;
          -moz-transition:margin .5s ease-in-out;}

.item:hover {  background:none;
                border:2px solid #73a058;
                width:96px;
                height:96px;
                }

.item:hover h1 {color:#73a058;}

.item:hover .tooltip {
           margin:-150px 0 0 -20px;
           -webkit-transition: margin .15s ease-in-out;
  -moz-transition: margin .15s ease-in-out;}

.arrow {
  position:absolute;
  margin:10px 0 0 50px;
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #fff;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.