<div class="entry">
  
  <div class="container">    
    <div class="button entypo-chat"></div>
    <div class="name">Jane Doe
      <span class="small">Wheteverist</span>      
    </div>
    <div class="photo">
      <img src="http://farm3.staticflickr.com/2612/4172547476_1bd2263c1b_q.jpg" alt="" class="pic">
    </div>
  </div>
  
  <p class="comment">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
  
</div>

<div class="entry">
  
  <div class="container">    
    <div class="button entypo-chat"></div>
    <div class="name">Marie Doe
      <span class="small">Time Traveler</span>      
    </div>
    <div class="photo">
      <img src="http://farm1.staticflickr.com/133/378977890_40f31e1962_q.jpg" alt="" class="pic">
    </div>
  </div>
  
  <p class="comment">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
  
</div>

<div class="entry">
  
  <div class="container">    
    <div class="button entypo-chat"></div>
    <div class="name">John Doe
      <span class="small">Astronaut</span>      
    </div>
    <div class="photo">
      <img src="http://farm4.staticflickr.com/3183/2291622444_422cf7eaf5_q.jpg" alt="" class="pic">
    </div>
  </div>
  
  <p class="comment">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  
</div>

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}

body{
  background:
url('http://farm4.staticflickr.com/3348/3344695759_e87cc9ea96_o.jpg');
  background-size:cover;
}

.entry{
  width:410px;
  margin:50px auto;
  float:left;
  border-radius:50%;
}

.container{
  width:110px;
  height:110px;
  margin:0 0 30px 10px;
  position:relative;
  border-radius:60px;  
  background:rgba(255,255,255,.2);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);  
  transition:all .5s;
  overflow:hidden;

}

.photo{
  width:90px;
  height:90px;
  margin:8px;
  border-radius:50%;
  position:absolute;
  left:0px;
  overflow:hidden;  
  border:2px solid white;
}

.pic{ max-width:100%; }

.button{  
  width:60px;
  height:60px;
  position:absolute;
  right:20px;
  top:25px;
  font-size:40px;
  text-align:center;
  line-height:60px;
  border-radius:50%;  
  color:rgba(255,255,255,.8);  
  background:green; 
  background:linear-gradient(bottom,#5ca321,#8ab24f);
  box-shadow:0 0 0 1px rgba(0,0,0,.2),
             0 0 0 5px rgba(255,255,255,.1),
             0 0 0 6px rgba(0,0,0,.2);
  transition:all .5s;
  cursor:pointer;
}
.button:hover{
  background:#5ca321;
  box-shadow:inset 0 1px 5px rgba(0,0,0,.3);
  text-shadow:0px 0px 5px gray;
}

.name{
  
  height:60%;
  width:180px;
  position:absolute;
  right:80px;
  padding:20px;
  font:25px arial;
  color:white;  
  opacity:0;
  transition:all .5s .5s;
  text-shadow:0 0 5px rgba(0,0,0,.5);
}

.small{ font-size:14px; display:block; margin-top:10px; }

.comment{
  width:370px;
  position:relative;
  padding:15px;
  font-size:16px;
  color:rgba(0,0,0,.7);
  border-radius:10px;
  background:rgba(255,255,255,.4);
  box-shadow:3px 3px 5px rgba(0,0,0,.2);
  opacity:0;
  transition:all 1s;
}

.comment:before{
  content:'';
  width:0;
  height:0;
  position:absolute;
  bottom:100%;
  left:2%;
  border-bottom:15px solid rgba(255,255,255,.4);
  border-left:50px solid transparent;
  border-right:50px solid transparent;
  border-top:15px solid transparent;
  
}

.container:hover{ width:400px; }

.container:hover .name,.container:hover + .comment{
  opacity:1;
}

//Photos used

//bg http://www.flickr.com/photos/masud/3344695759/
//http://www.flickr.com/photos/andre-batista/378977890/sizes/q/in/photostream/
//http://dribbble.com/shots/959364-Message-Widget-FREE-PSD?list=popular&offset=104
//http://farm4.staticflickr.com/3183/2291622444_422cf7eaf5_q.jpg