Edit in JSFiddle

<!-- the css implement of http://js.itivy.com/jiaoben963/index.html -->
<div class="items">
    <div class="item item-linkedin">
        <div class="item-left"></div>
        <div class="item-right">
            <p>about linkedin</p>
        </div>
    </div>
    <div class="item item-facebook">
        <div class="item-left"></div>
        <div class="item-right">
            <p>about facebook</p>
        </div>
    </div>
    <div class="item item-flickr">
        <div class="item-left"></div>
        <div class="item-right">
            <p>about flicker</p>
        </div>
    </div>
</div>

.items {
    font-size: 0px;
    letter-spacing: 0px;
    word-spacing: 0px;
}
.item {
    display: inline-block;
    overflow : hidden;
    height: 177px;
    width: 72px;
    margin: 0px;
    -webkit-transition: width .5s;
}
.item:hover {
    width: 272px;
}
.item .item-left {
    display: inline-block;
    position: absolute;
    overflow : hidden;
    width: 72px;
    height: 177px;
    -webkit-transition: background-position 0.3s;
}
.item:hover .item-left {
    background-position: -72px 0px;
}
.item.item-linkedin .item-left {
    background-image: url("http://js.itivy.com/jiaoben963/css/linkedin_btn.gif");
}
.item.item-facebook .item-left {
    background-image: url("http://js.itivy.com/jiaoben963/css/facebook_btn.gif");
}
.item.item-flickr .item-left {
    background-image: url("http://js.itivy.com/jiaoben963/css/flickr_btn.gif");
}
.item .item-right {
    position: relative;
    overflow : hidden;
    display: inline-block;
    width: 200px;
    margin-left: 72px;
    height: 177px;
    background: #cccccc;
    font-size: 15px;
}
.item:hover .item-right {
    width: 200px;
}