Añadir Efecto Burbuja a Imagenes con Css en tu Blog de Blogger

En este tutorial te mostrare como hacer el efecto burbuja a un elemento ,icono o imagen en tu blog de blogger.Este efecto de animacion hace tu sitio divertido y movido cual el visitante apreciara.Este efecto te ayudarta a crear tus propios proyectos de animacion y diseño.Este conlleva la funcion principal al momento pones el cursor del mouse sobre una imagen esta se infla o expande de una forma sinigual.Esta creado ademas con la inclucion de los codigos css y html.

Ejemplo:pasa tu cursor sobre iconos aqui abajo

• 
• 
• 
• 

Es simple se hacer y estos son los pasos a seguir para añadir este efecto burbuja a tu imagenes de blog de blogger.
1.Entra en tu blog de blogger
2.Ve a plantilla y busca Editar Html

3.Busca la etiqueta ]]></b:skin> y pega el siguiente codigo antes de esta.

/*URL: http:www.ciudadblogger.info */
.bubblewrap{

list-style-type:none;

margin:0;

padding:0;

}



.bubblewrap li{

display:inline;

width: 65px;

height:60px;

}



.bubblewrap li img{

width: 55px; 

height: 60px; 

border:0;

margin-right: 12px; 

-webkit-transition:-webkit-transform 0.1s ease-in; 

-o-transition:-o-transform 0.1s ease-in; 

}



.bubblewrap li img:hover{

-moz-transform:scale(1.8); 

-webkit-transform:scale(1.8);

-o-transform:scale(1.8);

} 

5.Ahora pega el siguiente codigo de HTML donde te guste para añadirlo a tus images.

<ul class="bubblewrap">

<li><a href="http://www.ciudadblogger.info /"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/StumbleUpon-icon.png"title="Añadir a stumbleupon" /></a></li>
<li><a href="http://www.ciudadblogger.info /"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Facebook-icon.png" title="Añadir a facebook"/></a></li>
<li><a href="http://www.ciudadblogger.info /"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Digg-icon.png" title="Añadir a Digg" /></a></li>
<li><a href="http://www.ciudadblogger.info /"><img src="http://icons.iconarchive.com/icons/artbees/social-networks-pro/64/Twitter-icon.png" title="Añadir a Twitter" /></a></li>
</ul>

6. Si quiere puedes cambiar las Url en Rojo  con la URL de tus iconos
7. Ahora podras añadir este a tu pagina dandole este toque te interacion con tus visitantes de tu sitio o blog.

Read More