lunes, 25 de julio de 2011

Opacidad y borde al pasar el cursor por una imagen



Para lograr este efecto has lo siguiente:

Abres tu Blog te vas a:

Diseño >> Edicion HTLM

Pulsa ctrl+F y busca :

/* Header


o

/* ----- HEADER ----- */


cualquiera de los dos ^^!!

copia y pega este codigo justo adelante del codigo anterior


/*------ IMAGE ANIMATION------*/
img {filter:alpha(opacity=100);
-webkit-transition-duration:.5s;} img:hover {filter: alpha(opacity=60); opacity: .6; -webkit-box-shadow: 0px 0px 20px #000000; -moz-box-shadow: 0px 0px 20px #000000; -webkit-border-top-right-radius:30; -webkit-border-top-left-radius:30; -webkit-border-bottom-right-radius:30; -webkit-border-bottom-left-radius:30;}img:hover {filter: alpha(opacity=60); opacity: .60; border: 1px solid#000000; border-radius: 50px; -moz-border-radius: 50px;}
-moz-opacity:1.0;
opacity:1.0;
}
img:hover {
filter:alpha(opacity=80);
-moz-opacity:0.80;
opacity:.80;
}
u {
text-decoration:underline;
border-bottom: 2px dotted #ff0080;
padding: 0px;
}


Lo de morado debes poner el codigo del color que tu prefieras o que combine con tu blog, por ejemplo yo utilize el rosa ^^!! Da vista previa o guarda !!



34 comentarios:

  1. cuando le cambio el color no se ve.... y los bordes casi no se resaltan....

    ResponderEliminar
  2. ese problema ya quedo arreglado por msn ^^!! te quedo muy bonito

    ResponderEliminar
  3. Gracias!! siempre traes excelentes ideas para el blog!!

    ResponderEliminar
  4. de nada .. fue un gusto haberte ayudado ^v^

    ResponderEliminar
  5. Hoola Aannyz gracias todo me encantan tus truquitos y tu blog pero me gustaria saber como hacer este mismo efecto pero en contrario que es opaco y tiene borde hasta que le pasas el cursor por encima, desde ya muchas gracias espero que leas mi commentario besos si sabes como me gustaria que te contactes conmigo :S pero nose como por dudas te dejo mi blog :/:
    http://omeletquericoomelet.blogspot.com/
    bye segui haciendo de los blogs un mejor lugar ;)

    ResponderEliminar
  6. claro .. creo saber de lo que me hablas en estos dias hare el tuto okas!!

    besos y buen fin de semana

    ResponderEliminar
  7. Hola annyz es la 1era vez que te comento en un tutorial, todo lo que pones me re-encanta en serio todo lo que pones es genial :) con respecto a este tutorial a mi en la edicion HTLM no me sale ni /* Header, ni /* ----- HEADER ----- */ ¿me podrias decir como encontrarlo o algo asi? porque realmente me encantaria usarlo

    ResponderEliminar
  8. hola ale disculpa por la demora.. T.T debes de tener el codigo pues es parte del header( significa la cabecera del blog) usualmente esta al principio de la edicion de plantilla.. !!

    ResponderEliminar
  9. muchas gracias annyz, al final lo encontré, creo que lo había escrito mal o algo así.

    ResponderEliminar
  10. hola grax x toos los trucos me hhan funcionado bn en mi blog :)mmm qeria dcirt en kuanto a ste truco hic too bn pro no me funciona solo en la imagen del titulo dl blog y para imagenes d entradas no me sirve, me ayudarias

    ResponderEliminar
  11. Me gustó *-* Gracias por todos tus trucos son muy lindos me han ayudado mucho para decorar mi blog :3 pero quiero hacer una pregunta Quiero que la imagen de mi blog desaparezca al pasarle el cursor, asi como en el tuyo.. ¿Como le hiciste? D; Graicas pot tu ayuda ^^

    ResponderEliminar
  12. hola hanyuu en la categoria tutoriales tengo este tuto xD amm se llama 2 en 1 rotate hover algo asi pero ahi explico como hacer eso que quieres para tu blogui ^^

    ResponderEliminar
  13. No sabes cuanto te agradezco! hace tiempo venia buscando algo para hacer con mis imágenes pero ningún truco me funcionaba xD! muchísimas gracias por el tuto, y por cierto, te felicito por el blog! es increíblemente adorable, lleno de cosas interesantes y siempre cuando necesito ayuda alguno de tus tutoriales me salvan ^^! es genial!

    ResponderEliminar
  14. awww muchas gracias por el tutorial >.<!! no sabía como ponerle la opacidad para que quedaran mas bonitas las imágenes al pasar el cursor ;O;! No sé qe sería de la vida de mi blog sin la existencia del tuyo uwu! Mil graciesotas Annyz *////*!!! <3

    ResponderEliminar
  15. Hola!!.. Hay alguna manera para que ese tuco no afecte el Banner??
    Es decir que lo quiero usar, pero no me gusta como queda en la cabecera... ¿como pudo hacer para que la cabecera no tenga ese efecto?
    Por si lo queres ver, mi blog es: www.MirandaCosgroveFans.com.ar
    Gracias por todos tus trucos! ;)

    ResponderEliminar
  16. Hola Annyz!!
    Tengo dos problemas:
    En los post, a las imágenes solo les aparece el efecto de opacidad, NO EL BORDE, y me preguntaba si ahí alguna manera de que este efecto no se aplique en la Cabecera
    Me encantaría que respondieras, Gracias!

    ResponderEliminar
  17. hola fatii:

    no nena desafortunadamente el script son para todas las imagenes incluyendo el header asi es por default x.x

    ResponderEliminar
  18. Ohh! :( Quee mal U.U
    Entonces, podrías pasar un tuto sobre como poner un efecto en las imágenes como el de esta pagina: fanfusionhungary.org
    Seria muy Cool de tu parte que lo pudieras pasar :)

    ResponderEliminar
  19. fatii:

    haha mira que casualidad justo hoy tengo pensado hacer un tuto sobre algo similar como lo que me pides.. aunque no es igual espero te guste oki? besos

    ResponderEliminar
  20. MATTY UME:

    de nada nena me da un gusto enorme que te haya gustado y servido ^^.. besos

    ResponderEliminar
  21. ARIGATO! Mil gracias le quedo lindismo a mi blog ^^ tu haces que mi blog se vea mega genial sigue asi!

    ResponderEliminar
  22. muchas gracias annys siempre traes cosas muy cute no sabes cuanto mejoraste a mi blog gracias ^-^**

    ResponderEliminar
  23. ¡Muchísimas gracias! Me quedó re bien ^_^

    ResponderEliminar
  24. podrias poner uno pero solo con borde?? gracias! ah y puedes poner un tuto de como ponerle el borde a una imagen osea quw cada vez que suba una imagen que tenga un borde grax, vi uno pero no me sale *w*

    ResponderEliminar
    Respuestas
    1. hola aixauno nena amm en tutoriales tengo uno que quiza es el que buscas .. y creo darme una idea de otro ya despues lo pongo con gusto

      Eliminar
    2. hola!! ^^ vi ese con borde pero el problem es que no me anda , si podrias no se ayudarme tengo tu misma plantila, y ademas si sabes hacer un tuto de como poner tipo esa barra donde tenes todo abajo de la cabecera pero imagen como en este blog www.zonastardoll-new.blogspot.com y si sabes editar por codigo html para que quede como este blog www.juankisjuankisstardoll.blogspot.com gracias y perdon por las molestias.

      Eliminar
    3. perdon se me pasaba lo del borde

      busca

      /* Header
      ----------------------------------------------- */

      y pega el codigo justo abajo y guarda

      Eliminar
  25. ahorita no puedo ayudarte nena gomenasai.. no tngo el tiempo para ponerme a hacer un menu personalizado.. la primera pag que me dices creo el tuto esta por aqui en la categorias tutoriales y la segunda ahi si el html es diferente y no tengo el tiempo por ahora..sorry

    ResponderEliminar

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