Icoane sociale efect zoom cu CSS

Putem transforma proprietăţile unor imagini într-o varietate de moduri, folosind doar CSS. CSS este folosit pentru a transforma diferite forme de imagini cum ar fi: patrate, cercuri, triunghiuri sau chiar un element de conţinut fără a deranja in jurul lui. Cele două proprietăţi sunt acceptate în versiunile moderne de Safari, Chrome, Mozilla 3.5 +, Opera 9.5 + . Folosid un cod CSS3 de mai jos obtinem efectul "umfla" o imagine atunci când mouse-ul trece peste ea, şi evine la forma initiala la retragere lui. Vezi exemplul de mai jos:

• 
• 
• 
• 
• 

Mergi la Desing --> Editati HTML si cauti urmatoarea linie ]]></b:skin> exact deasupra ei adaugi urmatorul Cod CSS:

<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://nouwidget.blogspot.com/style/ */

.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}

.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}

.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}

.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}

Salveaza si mergi la o postare noua sau deschizi un nou gadget HTML/Javascript si adaugi urmatorul cod HTML:

<ul class="bubblewrap">
<li><a href="URL_LINK"><img src="url_imagine_Stumbleupon.png" title="Add to Stumbleupon" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_facebook.png" title="Add to Facebook" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_digg.png" title="Add to Digg" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_twitter.png" title="Add to Twitter" /></a></li>
<li><a href="URL_LINK"><img src="url_imagine_rss.png" title="Add RSS Feed" /></a></li>
</ul>

Schimba URL_LINK cu linck-ul corespunzator pagini de socializare , si de asemenea url_ imagine cu respectiva imagine a retele. SUCCES!