A CodePen by Abdur Jabbar. A Neat Developer's List - A developers list I want to add to a landing page I'm building. These aren't real developers, just images I grabbed off of Google.

index.html

<div class="developers">
  <a href="#"><b>John</b></a>
  <a href="#"><b>Ralph</b></a>
  <a href="#"><b>Rebecca</b></a>
  <a href="#"><b>David</b></a>
  <a href="#"><b>Thomas</b></a>
  <a href="#"><p>Developers</p></a>
</div>

script.js

$('div').hover(function(){
  $('a:nth-of-type(6)').css('width','120%').css('border-radius','100px').fadeOut();
  $('a').each(function(index){
    if (index!==5)
    $(this).css('left', ((4 - index) * 150) - 40 + 'px');
  });
}, function(){
  $('a:nth-of-type(6)').css('width','100%').css('border-radius','100px').fadeIn();
  $('a').each(function(index){
    $(this).css('left', '');
  });
});

style.css

html {
  font-family: 'Raleway', sans-serif;
  background: url(http://amandadyerdesign.com/wp-content/uploads/2012/07/subtle-patterns-zebra.jpg);
}

img {
  display: inline;
  height: 150px;
  width: auto;
}

div.developers {
  position: relative;
  display: block;
  width: 150px;
  height: 150px;
  border-radius: 100%;
  margin: auto;
  margin-top: 100px;
  transition: transform 500ms, height 500ms, width 500ms;
}

div.developers:hover {
  box-shadow: none;
  width: 600px;
  height: 600px;
}

a:nth-of-type(1) {
  background: url(http://share.leaderinus.com/wp-content/uploads/2012/05/15-Powerful-Things-Happy-People-Do-Differently.jpg) no-repeat;
  background-size: auto 100%;
}

a:nth-of-type(2) {
  background: url(http://a4.ec-images.myspacecdn.com/images02/47/dd9b60d2eff746d4babac1237154ed4a/l.jpg) no-repeat;
  background-size: 100% auto;
}

a:nth-of-type(3) {
  background: url(http://www.wongrolle.com/happyperson.jpg) no-repeat center;
  background-size: auto 100%;
}

a:nth-of-type(4) {
  background: url(http://www.crosbysmiles.com/blog/wp-content/uploads/2008/10/after-face.jpg) no-repeat center;
  background-size: auto 100%;
}

a:nth-of-type(5) {
  background: url(http://thetrendguys.com/wp-content/uploads/2012/09/Happy-Person.jpg) no-repeat;
  background-position: 100% 10%;
  background-size: auto 100%;
}

a:nth-of-type(6) {
  text-align: center;
  background-color: rgba(0,0,100,0.8);
  text-decoration: none;
  color: transparent;
  font-size: 1.5em;
  font-weight: 100;
  text-shadow: 0 0 0 white;
}

a:nth-of-type(6) > p {
  position: relative;
  top: 25%;
}

a {
  text-decoration: none;
  text-align: center;
  display: inline;
  position: absolute;
  border-radius: 100%;
  width: 150px;
  height: 150px;
  transition: transform 250ms, left 500ms, box-shadow 300ms;
  box-shadow: 0 0 10px rgba(0,0,100,0.4), inset 0 0 0px 150px rgba(0,0,100,0.4);
}

a > b {
  position: relative;
  color: transparent;
  transition: all 250ms;
}

a:hover > b {
  bottom: 25px;
  color: rgba(0,0,100,0.7);
}

a:hover {
  z-index: 2;
  transform: scale(1.2);
  box-shadow:0 0 10px rgba(0,0,100,0.4), inset 0 0 0px 0px rgba(0,0,100,0.4), 0 0 20px 5px rgba(0,0,0,0.8);
}