Iconos Sociales con Efecto de Agrandar en Css.

¡Buenas, buenas! ¿Como han amanecido? ¡espero que bien!, en esta entrada veremos un tutorial de Iconos Sociales con Efecto de Agrandar en Css lo cuál me parece interesante.

Vista previa:

(Ojo qué, vienen uno al lado del otro, y al colocar el mause sobre uno de ellos se agrandará)



Bueno primero que nada, haz una copia de seguridad de la plantilla de tu blog. Luego agregamos lo siguiente  en añadir un gadget html/javascript.

Debes llenar los datos que se encuentran con letras mayúsculas, tal como la dirección de tu página de Google + , etc. si no tienes puedes borrar esa parte y simplemente no se verá.

Luego iremos a plantilla, edición de html y ante de ]]>
, agregamos los siguientes estilos, los cuales dan el efecto de agrandar.

/* -- social connect widget -- */.social-connect-widget img{-webkit-transform:scale(0.9);-moz-transform:scale(0.9);-o-transform:scale(0.9);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}.social-connect-widget img:hover{-webkit-transform:scale(1);-moz-transform:scale(1);-o-transform:scale(1);-webkit-transition-duration: 0.2s;-moz-transition-duration: 0.2s;-o-transition-duration: 0.2s;}.social-connect-widget{text-align:right;margin:20px 20px ;}.social-connect-widget img{vertical-align:middle} 

Si quisieras agrandar aún mas los íconos, prueba cambiando los valores en scale(1) a scale(1.2)  por ejemplo. Comprobamos en vista previa que todo luce bien y guardamos.

¡Muchos besos, qué tengan un buen día!

Créditos a: Creando Blogs.