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:

VER DEMO DEL TRUCO

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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNqiyqWAdLppnL7f58F35KN4M4yvWfJJqhYXsRXyyJGOLRjclnZrMpgxqw1lidQ9pUOjxu3HGl92UZUf3HAf91hUS6cYyGMuMLTKuMEz4XqvAdNtPsnwiYc1RSMrPa6R_31XL34Z4PoYo/s1600/g+-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Facebook" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgzv2YkmZ2ZDZEbbLexslRfPHx6mm36BuncPXJopPSX6yBcp9fI-Jm6_OMcMx3F74phSx5jHUenos-N2Q5xJGQ5WmGfwMU1Gke5usEYkVJBqXi8ASAcZY3QWvzPYTrKZJuuFRsraR7eV0/s1600/fb-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Linkedin" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV7mUimlDAj72S-kaXgPm_HlIN_aAOIP7JJn-6YGhsVsdWx3_4Vcy6FRanXZdBnOF-dg6Rm-zp7Dy1hDnA76vlLQFcdMQxiJhUqsWRhMlVQdoLwAOcJB_FoqqF-dYyU034G-xS3KG6aIs/s1600/linkedin-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Pinterest" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7ypfLmfAvakn5uUEuM0TV805IyBY7bAt1KImuwMOsYlCXta8mb_PZjsNeJmiWVgavp1h3vkYXkR9TDqRtfbEAa9tOGWUaq8IWMRtpLYq9fxJJcQCgrMqjmDM1KrybAuzIjEswfVB-uDI/s1600/pinter-ball-64.png" /></a>
<a class="hovergallery" href="URL de tu cuenta de Twitter" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRSrZnBlFZyXSwoZbRukFMgF5jqe6En4_x5fQApFds6ns-aK9K7DOWr-LNG9bf_O4B41G9CpYcnoGBVmt1-r2HyRs_a0wMjryDSD5ooTJ9uqSh5QAFyR91irzw3_AMVT0_LTd_0evj84s/s1600/twitter-ball-64.png" /></a> <a class="hovergallery" href="URL de tu cuenta de Youtube" target="_blank">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgaBgqzcSYLxxMU2wCQjIHBnrWE7B6H86c89wny5AZJbpX8H3b16mRwoGiyjIS1X_hlPmNiy6o8Cg4k6YnJz7ozN0rkdOqCBeVpco9UQty1IIVOjQiUWEf-ZKXoIjk4zhCr_0OnedEeP-8/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.