Iconos sociales navideños con efecto zoom

Como estamos en época navideña he decidido hacer una serie de entradas con trucos navideños para que puedas decorar tu blog acorde a esta época, y en el día de hoy voy a compartir unos hermosos iconos sociales navideños con efecto de zoom.

El efecto zoom en los iconos es logrado gracias a CSS, mas exactamente por la propiedad hovergallery.

Los iconos se ven de la siguiente manera:

Para agregar este truco a tu blog ve a Diseño, Añadir Gadget, HTML/JavaScript y pega lo siguiente:

<div class="separator" style="clear: both; text-align: center;">
<a class="hovergallery" href="URL de tu cuenta de Google Plus" target="_blank">
<img src="http://4.bp.blogspot.com/-kZ9OGOh7sT0/UrC4irF9TjI/AAAAAAAADgY/s89EdpFm8LY/s1600/g+-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="http://3.bp.blogspot.com/-BvRp6Vk69Jk/UrC4eahW_LI/AAAAAAAADgQ/_FT4QU4sX_w/s1600/fb-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Linkedin" target="_blank">
<img src="http://3.bp.blogspot.com/-bOk0ZfRWd0s/UrC5BG8D_lI/AAAAAAAADgg/l56sHlfrETg/s1600/linkedin-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="http://2.bp.blogspot.com/-kI5kCOttMaY/UrC5MzVjnpI/AAAAAAAADgo/iIDZm8O-VJg/s1600/pinter-ball-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="http://1.bp.blogspot.com/-LMpQidTb2SE/UrC5RK4xZhI/AAAAAAAADgw/ooTI665NE68/s1600/twitter-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank">
<img src="http://1.bp.blogspot.com/-snUikwURUAw/UrC5op2F57I/AAAAAAAADg4/2tSqo98vrYw/s1600/youtube-ball-64.png" /></a></div>
<style type="text/css">
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
opacity: 0.7;
margin: 0 1px 5px 0;
}
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1);
-o-transform:scale(1.1);
opacity: 1;
}
</style>

Ahora reemplaza lo que esta resaltado en color azul por lo que se indica en cada caso y guarda los cambios.

Esperamos que te haya gustado este espectacular truco para tu blog y que nos sigas visitando.