The Team

by Alin Guta

HTML

<div id="team">
    <div class="me left"></div>
    <div class="me active center"></div>
    <div class="me right"></div>
</div>

CSS

#team {
    width:380px;
    position:relative;
    margin:0 auto;
    padding:0;
}
.me {
    width:130px;
    height:130px;
    position:absolute;
    left:0;
    top:75px;
    opacity:0.3;
    background:#000;
    border-radius:50%;
}
.left {
    left:0;
}
.center {
    width: 180px;
    height: 180px;
    top: 0;
    left: 100px;
    opacity: 1;
    z-index:10;
}
.right {
    left: 250px;
}

JavaScript

$('.me').click(function () {
    if ($(this).css('left') != '100px') {
        var l = ($(this).css('left') == '0px') ? 0 : 250;
        $(this).animate({
            width: 180,
            height: 180,
            left: 100,
            top: 0,
            opacity: 1
        }, 400);
        $('.active').animate({
            width: 130,
            height: 130,
            left: l,
            top: 75,
            opacity: 0.3
        }, 400);
        $('#team > .me').removeClass('active');
        $(this).addClass('active');
    }
});