Şimdi yazdım. Umarım işini görür.

Not: 87px ve 24px'i kendi ikon boyutuna göre değiştirmen, matematiksel hesap yapman gerekecektir.

<style>
#Paylas #PaylasYazi {
	float: left;
	height: 24px;
	line-height: 24px;
	font-size: 14px;
	overflow: hidden;
	font-family: Arial;
}
#Paylas #PaylasYazi #PaylasButon {
	width: 0px;
	height: 24px;
	line-height: 24px;
	float: left;
	overflow: hidden;
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
}
#Paylas #PaylasYazi:hover #PaylasButon {
	width: 87px;
}
#Paylas #PaylasYazi #PaylasButon a {
	height: 24px;
	float: left;
	background-color: #cc0000;
	display: block;
	overflow: hidden;
	width: 0px;
	-moz-transition: width 0.5s margin-right 0.5s;
	-webkit-transition: width 0.5s margin-right 0.5s;
	transition: width 0.5s, margin-right 0.5s;
	margin-right: 0px;
}
#Paylas #PaylasYazi #PaylasButon a img {
	-moz-transition: width 0.5s;
	-webkit-transition: width 0.5s;
	transition: width 0.5s;
	width: 0px;
	height: 24px;
}
#Paylas #PaylasYazi:hover #PaylasButon a {
	width: 24px;
	margin-right: 5px;
}
#Paylas #PaylasYazi:hover #PaylasButon a img {
	width: 24px;
}
</style>
<div id="Paylas">
<div id="PaylasYazi">
<div id="PaylasButon">
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
	<a href="#"><img src="http://www.baskihizmetleri.net/wp-content/uploads/deneme.jpg" /></a>
</div>
<!-- #PaylasButon -->
Paylaş
</div>
<!-- #PaylasYazi -->
</div>
<!-- #Paylas -->