Edit in JSFiddle

<img class="avatar" src="http://www.gravatar.com/avatar/94d093eda664adddde450d7e9881bcad?s=64&d=identicon&r=PG" alt="avatar" />
<img class="avatar" src="http://lh6.googleusercontent.com/-VFBBR6rRAkk/AAAAAAAAAAI/AAAAAAAABeQ/nyT550h6qzU/s512-c/photo.jpg" alt="avatar" />
<img class="avatar" src="http://www.gravatar.com/avatar/94d093eda664adddfde450d7e9881bcad?s=64&d=identicon&r=PG" alt="avatar" />
<img class="avatar" src="https://lh3.googleusercontent.com/-ss_2L15d0PI/T9oOxJRKMcI/AAAAAAAABb8/AReTZX0zYzo/s251/DSC00924.JPG" alt="avatar" />

/* Rounded avatars */
.avatar {
    cursor:pointer;
    float: left;
    margin-top: 1em;
    margin-right: 1em;
    position: relative;
    width:64px;
    heigth:64px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    -moz-box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px #999, 0 2px 5px 4px rgba(0,0,0,.2);
}
.avatar:hover{
 height:100px;
width:100px;    
}