lunes, 17 de septiembre de 2012

Hover Imagen Rainbow

Este tutorial me lo presto Melo-Chan <3
es un efecto multicolor muy lindo que le da a las imagenes
al pasar el cursor sobre ellas ^^


para ver el efecto solo pasa el cursor sobre la siguiente imagen


para poner este efecto en tu blog haz lo siguiente:

Ve a Diseño >> Edicion de html >> Editar plantilla

y busca el siguiente codigo:

]]></b:skin>

pegar este codigo justo arriba de ]]></b:skin>

img {
filter: hue-rotate(360deg);
-webkit-filter: hue-rotate(360deg);
-moz-filter: hue-rotate(360deg);
-webkit-filter;(1);
-webkit-transition: all 0.7s linear;
-moz-transition: all 0.7s linear;
transition: all 0.7s linear;}
img:hover {
filter: hue-rotate(0deg);
-webkit-filter: hue-rotate(0deg);
-moz-filter: hue-rotate(0deg);
-webkit-filter;(0);}

Da vista previa y guardas ^^
Credito:


17 comentarios:

  1. ya me lo sabia pero es bueno que lo compartan jeje

    ResponderEliminar
  2. OYE MIRA LO QUE PUSE PARA TI EN MI BLOG, OJALA QUE TE GUSTE ERES LA MEJOR AQUI EL LINK DE MI BLOG http://ysa-rainbow.blogspot.com/ :3

    ResponderEliminar
  3. Super kawaii *-* gracias annyz... ya lo puse en mis blog http://yoamomisblendsoficial.blogspot.com/ y http://maryriveditions.blogspot.com/

    ResponderEliminar
  4. :3 Hola tienes un premio en mi blog *-*¡ http://lunany-kawaii.blogspot.com/2012/09/premio-para.html

    ResponderEliminar
  5. Hola! muy bueno, ya lo implementé en mi blog.
    Te quería preguntar, si podrías poner un tuto de esas cajitas con el código que pones, que están muy lindas y me servirían demasiado.
    Bueno, espero que lo hagas!
    Besos!
    Juli♥

    ResponderEliminar
  6. como busco el ]]> solo encuentro un es igual??? o como Dx

    ResponderEliminar
  7. Respuestas
    1. sip es ese el codigo.. solo hay uno en toda la plantilla.. pega este codigo arriba del

      mg {
      filter: hue-rotate(360deg);
      -webkit-filter: hue-rotate(360deg);
      -moz-filter: hue-rotate(360deg);
      -webkit-filter;(1);
      -webkit-transition: all 0.7s linear;
      -moz-transition: all 0.7s linear;
      transition: all 0.7s linear;}
      img:hover {
      filter: hue-rotate(0deg);
      -webkit-filter: hue-rotate(0deg);
      -moz-filter: hue-rotate(0deg);
      -webkit-filter;(0);}

      Eliminar
  8. Hola Annyz, espero que te encuentres bien, molestandote a ver si me puedes ayudar, mirando el efecto no pasa nada en mi blog al menos no aparecen el efecto en las imagenes, y viendolo en la pagina de Melo-chan me gusto el efecto de la pagina del blog de prueba http://mimundodecreacionprueba.blogspot.com.ar/ el que dice Link Multiple me podrías ayudar porque aunque busque en su blog no lo encontre.

    Gracias

    ResponderEliminar
    Respuestas
    1. claro con gusto ^^ ese tuto tambien me lo presto pero aun no lo pongo xD..

      te paso el link de su blog donde encontraras ese efecto

      http://mimundodecreacion.blogspot.mx/2012/09/efecto-multiple-en-links-hover.html

      besos

      Eliminar
    2. Muchas gracias annyz me blog esta muy lindo con todos estos coquetos y lindos detalles :D

      Eliminar
  9. mira pues ami no me sirvio espero que me explique o me digas porque y commo lo podre hacer mi blog ; supertrucosdetardollymas.blogspot.com

    ResponderEliminar
  10. Hola!! me gusta mucho tu blog es el mejor en el se encuentra de todo :D bueno no se mucho de blogger y hace tiempo que tengo un blog que no huso pero lo empeze a arreglar y todo eso y queria que vieras que te puse un credito >3< espero y te guste:anime-fans-bloggers.blogspot.mx

    ResponderEliminar
  11. Annyz no quiero ser chibata pero se copian de ti!!
    http://casithakawaii.blogspot.com.es/

    ResponderEliminar
  12. annyz tengo un problema u.U hago todo tal y como lo explicas pero cuando voy a ver mi blog no aparece nada u.U
    que hago T.T help me

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.