Iconos Sociales con efecto Mouse Over

En el mundo del diseño web se pueden lograr grandes efectos con pequeños trozos de códigos como el ejemplo que les voy a mostrar hoy, iconos sociales con efecto mouse over, esto quiere decir que cuando se pasa el cursor por encima de una imagen se muestra otra; el truco se ve de la siguiente manera:

Iconos Sociales con efecto Mouse Over

Para agregar este truco a tu blog añade el siguiente código en la parte de tu web que quieras que se vea:

<a href="URL FACEBOOK"><img src="http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png" onmouseover="this.src='http://4.bp.blogspot.com/-VdH6BA280WM/VOo4U1QIWQI/AAAAAAAAFQQ/TR3vJ-yXCKc/s1600/facebook.png'" onmouseout="this.src='http://3.bp.blogspot.com/-eyCg8VyhqQI/Uy8F9r60xCI/AAAAAAAAD0E/sQ82sCRQc3Y/s1600/facebook-64.png'" /></a> <a href="URL TWITTER"><img src="http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png" onmouseover="this.src='http://4.bp.blogspot.com/-ikMLvB5W4MA/VOo4U_VBqrI/AAAAAAAAFQU/1GltTA054G0/s1600/google.png'" onmouseout="this.src='http://2.bp.blogspot.com/-JtCjmiY5Jl8/Uy8GGiqq9sI/AAAAAAAAD0k/WIXtHNHxOw0/s1600/twitter-64.png'" /></a><a href="URL GOOLGE+"><img src="http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png" onmouseover="this.src='http://2.bp.blogspot.com/-ndlmokv4Qf4/VOo41kk0YXI/AAAAAAAAFQg/BwKSLX6IFy0/s1600/twitter.png'" onmouseout="this.src='http://4.bp.blogspot.com/-J6FGCxIRNxs/Uy8F_DZ3N9I/AAAAAAAAD0M/lD7cMz_fq_4/s1600/googleplus-64.png'" /></a>

Ahora reemplaza lo resaltado en color azul por lo que se indica en cada caso, guardas los cambios y listo.

Espero que este tutorial te haya gustado y no olvides compartirlo en tus redes sociales.

0
Shares

6 thoughts on “Iconos Sociales con efecto Mouse Over

  • febrero 23, 2015 en 3:11 pm
    Permalink

    Gostaria de tutoriais de Menu Vertical com efeito acordeon com sub abas. Procurei aqui no mil truques, mas só encontrei horizontal!

    Responder
  • febrero 23, 2015 en 3:16 pm
    Permalink

    Gostaria de um tutorial sobre como dividir as postagens da pagina inicial em box, de maneira que possa personalizar! Obrigada

    Responder
  • abril 13, 2015 en 10:19 am
    Permalink

    No me funciona, cuando lo pego en mi widget lo unico que se ven son 4 cuadrados de las redes sociales pero no las imagenes.

    Responder
    • abril 13, 2015 en 6:54 pm
      Permalink

      Hola Miguel podrías indicarme en que blog se presenta este error.

      Saludos 😀

      Responder

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *