Efecto de opacidad con desvanecimiento al pasar el cursor

31 de enero de 2010 215 comentarios ,
imagen con fade
Anteriormente vimos cómo podemos darle un efecto de opacidad a las imágenes al pasar el cursor, para ello agregamos en el código de la imagen los estilos de opacidad.
Ahora vamos a ver el mismo efecto pero con un plus, es decir, vamos a darle un efecto de opacidad a las imágenes al pasar el cursor pero con un desvanecimiento para que la imagen se aclare de forma suave.
Este mismo efecto puede darse a casi cualquier elemento, puedes ver un ejemplo en este blog de pruebas, pasa el cursor sobre la imagen para ver el efecto; lo mismo puedes hacer con el texto que se encuentra abajo de ella.

Para darle este efecto de opacidad con desvanecimiento a tus imágenes entra en Diseño > Edición de HTML y antes de </head> pega lo siguiente:
<script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js' type='text/javascript'></script>

Luego pega antes de </body> esto:
<script type='text/javascript'>
gradualFader.init() //activate gradual fader
</script>

El último paso es sólo agregar la clase gradualfader a la imagen, por ejemplo:
<img src="URL de la imagen" class="gradualfader" />

Y eso es todo, así se simple. Si tu imagen ya tuviera otra clase, por ejemplo otro efecto como pushbutton y también quieres agregar este efecto entonces sólo deja un espacio y agrega la clase correspondiente, por ejemplo:
<img src="URL de la imagen" class="pushbutton gradualfader" />

Lo mismo si quieres el efecto en un div u otro elemento, sólo agrega class="gradualfader" dentro se su código y listo.

Como siempre te recomiendo descargar el script y subirlo a tu servidor para no sobre cargar el ancho de banda.


215 comentarios en:

" Efecto de opacidad con desvanecimiento al pasar el cursor "

  1. Primer coment??? jejeje
    Muy bueno Potro!!!
    Sorprendiendo como siempre compañero!!!

    Abrazo grande!

    ResponderEliminar
  2. Muy bueno.

    Solo una pregunta, se pueden abrir videos en ventanas modales.

    saludos.

    ResponderEliminar
  3. 6704 comentarios, en un montón... Ahora vas a por los 8000 supongo... jejeje... nos vemos Potro!

    ResponderEliminar
  4. El Venado, en el que vimos de Lightbox no, pero más adelante mostraré otros tipos de ventanas modales en los que sí es posible mostrar todo tipo de archivos incluyendo videos.

    Ascesino96, y ya son 300 seguidores!!!

    ResponderEliminar
  5. Guau, que fiesta, falta que te dejen 100 comentarios en alguna de tus entradas y ya está completito todo...

    ResponderEliminar
  6. Imposible dejar la plantilla tranquila aunque esté de vacaciones. Con éstos truquillos, dan ganas de comenzar a "meter mano".
    Saludos Potro.
    Genial.
    Lo apliqué en mi marquesina inferior.
    Gracias.
    Jpz.-

    ResponderEliminar
  7. Ascesino96, ya hay algunas con más de 100 :D

    Jpz, un "truco nuevo" es como un niño con juguete nuevo, jajaja.

    ResponderEliminar
  8. Wow Bro...me encanta!!!

    O_o 6700 comentarios... Felicitaciones Bro... Blogger va a empezar a cobrarte un Cánon por coment XD.

    class="gradualfader" puede colocarse en cualquier parte de un cod o despues de algo en particular?



    Un abrazo!!!!

    ResponderEliminar
  9. Jajajaja, no lo ví, será que las entradas populares son unas fraudes, jajaja, entonces hay fiesta, jajaja, bueno, voy a seguir juntando platita... acá hay un servicio que es muy bueno, te pagan por registrarte en algunas webs y eso...
    http://es.beruby.com/promocode/umwMqu

    ResponderEliminar
  10. Hola brother,

    No es necesario un orden, de cualquier modo la plantilla lo acomoda a su gusto, pero lo indicado es que vaya al inicio del código, por ejemplo:

    <div class="gradualfader" ....
    <span class="gradualfader" ...
    <img class="gradualfader" ...
    <p class="gradualfader" ...

    Un abrazo!

    ResponderEliminar
  11. Ascesino96, pues no fraude, lo que pasa es que yo no tengo el gadget de entradas más comentadas, el que yo tengo es el de los más visitados (no necesariamente son los más comentados)

    :)

    ResponderEliminar
  12. Hola Hola Potro me gusto mucho,
    pero una duda haber si me puedes ayudar si no pues no
    pero en la web http://disneyrocksmx.blogspot.com/
    tiene su buscador Integrado lo quiero quitar y poner el de Google como le hago, ya trate pero no se puede, es que ese buscador no es muy bueno
    Espero tu respuesta y Si se puede ok
    GRACIAS

    ResponderEliminar
  13. Hola Alex,

    Claro que puedes quitarlo, a mí tampoco me gustan esos buscadores, se ven mejor pero funcionan muy mal.
    Busca en tu plantilla esta parte y eliminala:

    <form action='http://disneyrocksmx.blogspot.com/search' id='search' method='get'>
    <input id='s' name='q' onfocus='this.value=' type='text' value=''/>
    <input id='searchsubmit' type='submit' value=''/>
    </form>

    Saludos.

    ResponderEliminar
  14. Muchas gracias Teacher, ahora ya no tengo excusa para molestarte si intento aplicar este truco...

    Un abrazo!!!

    ResponderEliminar
  15. Ya sabes que no es ninguna molestia ;)

    ResponderEliminar
  16. exelente muy bueno como todos lo q se muetra en este blog !

    pd:http://hojalataa.blogspot.com/ ! :)

    ResponderEliminar
  17. Hola Potro! De nuevo por acá visitándote.

    Interesante efecto el del truco de hoy. Se me ocurre que, si gustas, podrías agregar para los principiantes, algunas sugerencias, sobre a qué tipo de blogs, o en qué circunstancia convendría usar tus trucos. Los novatos no siempre tendrán ideas claras respecto de qué les pueda ser útil, o sólo decorativo, o incluso inútil y que ralentice la carga del blog sin justificación.

    Claro está, poner un gadget o un truco cualquiera, es cosa de gustos del autor del blog. Pero una sugerencia de un experto como tú, acerca de dónde y cuándo usarlo, sería sencillamente una guía tan útil como el truco mismo. Incluso, bien podría ser una sección de todos tus post, denominada: Usos sugeridos, Cuándo y dónde usar, o algo similar.

    Sigue con tu excelente trabajo, amigo.

    Abrazos!

    ResponderEliminar
  18. hojalataa, qué bueno que te ha gustado :)

    Joaquín, de hecho tengo un post programado acerca de cómo aligerar la carga del blog y en él se menciona aquello de usar sólo lo elemental. Un abrazo!

    ResponderEliminar
  19. Hola de nuevo!
    Muy elegante sin duda, y lo mejor es que no hay que emplear mucho código ;)
    Desde luego, ya son 307 los seguidores, y pensar que fuimos el numero 120...
    ¡Un gran saludo desde España!

    ResponderEliminar
  20. Eso es lo mejor de todo, que no hay que "moverle" tanto al blog para hacerlo.
    Mira qué memoria la de ustedes, me sorprende que se acuerden qué número de seguidores fueron :|

    Un abrazo fuerte!

    ResponderEliminar
  21. Gracias Potro Gracias por lo del buscador ya lo quite y puse mejor el de Google que esta mejor,
    GRACIAS

    ResponderEliminar
  22. Hola Potro, de nuevo yo! Más bien lo que te decía no era tanto por lo de la lentitud en la carga, eso pues será decisión de cada bloguero, sino que más bien me parecía muy útil, que un experto como tú pudiera hacer sugerencias o dar ideas sobre cuando podría ser conveniente usar un truco X; por ejemplo: "El truco de hoy quedaría muy bien en un blog de biografías de artistas", o bien, "Este truco será útil para blogs sobre películas, y este otro en un blog de deportes..."

    Como digo, al final cada bloguero decide, pero tú que has visto tantos ejemplos, y encima eres el creador de los trucos mismos, podrías dar ideas para los principiantes, que serían muy útiles.

    Hasta pronto amigo!

    ResponderEliminar
  23. Hola Joaquín,

    Ahí es más complicado el asunto, ya que sería como limitar un poco el uso de cualquier "truco".
    Esto lo digo porque en algunos de los trucos que aquí se han presentado menciono que tienen un fin determinado, pero hay muchos usuarios que visitan este blog que han hecho cosas extraordinarias con el mismo truco, es decir, le dieron otro uso (distinto al recomendado) y con resultados sorprendentes.
    Así que preferiría limitarme a exponer los códigos (con sus debidas sugerencias) y que sea el usuario final quien decida qué y cómo usa los códigos.
    De verdad que tienen mucho potencial y no me gustaría limitarlos un poco si les sugiero en qué quedaría bien o en qué no.

    Un abrazo enorme.

    ResponderEliminar
  24. hola!
    bueno primero dejame decirte que te la rifas muy cañon! mis respetos al 100%!!!
    y ps también te quiero decir que tengo una duda :S
    aquí en lo que se refiere a lo de head y body no tuve problema, pero en qué parte se le pone la clase a la imagen?
    y solo se puede con imágenes metidas con link al blog o también con imágenes subidas directo al blog?

    gracias!! =3

    ResponderEliminar
  25. ya pude!!! XD gracias de todas formas!!! jeje

    ResponderEliminar
  26. Qué bueno que ya supiste cómo hacerlo :)

    ResponderEliminar
  27. muy bueno Potro ^^ me sirvio mucho jeje lo andaba buscando por que lo vi en una web y no sabia como hacerlo ^^ de veras muchas gracias

    ResponderEliminar
  28. Qué bueno que te ha servido y que encontraste la forma de hacerlo :)

    ResponderEliminar
  29. Hola potro... tengo una pregunta: Tengo un boton que aplique este efecto, pero me gustaria que el boton quede de un color opaco, puede ser gris (en reposo) y cuando paso por él (con este efecto) se convierta en el color original. Será que se puede hacer con este truco o hay eso hace parte de otro spot.
    Gracias

    ResponderEliminar
  30. Creo que te convendría más hacer dos imágenes, una con los tonos grises que quieres y otra con los colores normales.
    Luego aplicarías esta función.

    Saludos.

    ResponderEliminar
  31. Hola Potro: he estado intentanto colocar la aplicacion que me dices... pero no se en donde colocarlo para este spot, pues me gustaria que el cambion de imagenes quede con este efecto....!!!!
    Gracias.

    ResponderEliminar
  32. Combinar ambos no creo que se pueda :s

    ResponderEliminar
  33. Yo estoy teniendo la misma inquietud que Robinson, Quisiera que la imagen pase de un color opaco a mas claro. y no como viene por default el efecto que es de color claro a opaco. Si alguien consigue una solucion a este problema que avise :) jej Gracias! Aclaro que probe la opcion de intercambio de imagenes pero me gusta mucho mas el efecto fade. Saludos !

    ResponderEliminar
  34. Hola Potro! excelente código y super facil de aplicar (apenas estoy montando mi primera web y lo pude hacer) jajaja ... Solo tengo un inconveniente: en safari y firefox se ve bien, pero en el explorer 8 no aparece el efecto =(

    Saludos! y Mil Gracias!

    ResponderEliminar
  35. Hola GabyRoots,

    Lo he probado en las versiones 7 y 8 de Internet Explorer y en ambas me ha funcionado el efecto sin ningún problema o.O

    ResponderEliminar
  36. estimado, alguna forma de que la imagen NO quede así de "apagada" en modo pasivo? te lo agradecería, saludos.

    ResponderEliminar
  37. con esto sí quiero molestarte: alguna posibilidad de integrar a las imágenes de blogger un efecto de "caja informativa" similar a lo que hay en este sitio? http://goo.gl/Brc3 (imgs. del centro, fondo negro) saludos!

    ResponderEliminar
  38. prometo que esto es lo último: los bordes de éstas imágenes en iexplorer se ven así: http://img820.imageshack.us/img820/7434/failexplorer.jpg pero en chrome y firefox se ven perfectas. estimado, algún truco para solucionar esto? por favor.

    ResponderEliminar
  39. Desconozco qué método sea el que usan en ese sitio así que no sabría decirte si se puede usar en Blogger.

    Supongo que las imágenes que dices están en formato GIF pues ese formato suele dejar ese halo en las imágenes lo cual le resta estética, lo mejor es buscar las mismas pero en formato PNG también soporta transparencias y sin ese halo alrededor.

    ResponderEliminar
  40. son .png, en chrome y mozilla se ven perfectas

    ResponderEliminar
  41. respecto a las imágenes del sitio, existirá algo similar para aplicar en bogger?

    ResponderEliminar
  42. Entonces debe ser por la versión de tu navegador aunque no he visto que Internet Explorer tenga problemas de ese tipo en cuanto a las imágenes.

    Lo más parecido que se me ocurre a lo que buscas es algo como esto:
    http://gemablog-.blogspot.com/2010/03/galeria-con-jquery-fancy-thumbnail.html

    ResponderEliminar
  43. Potro, muchísimas gracias, lo de Gem@ me ayudará mucho, y con las imágenes, las editaré para ver qué pasa.
    saludos.

    ResponderEliminar
  44. Grande!!!
    Le puse el efecto a los sharebuttons y quedaron de lujo
    Gracias Potro!!! ;)

    ResponderEliminar
  45. Vaya, de por sí me parecían elegantes los sharebuttons pero con el efecto que le agregaste se mucho pero mucho mejor :D

    ResponderEliminar
  46. Hola Hola

    Quería saber como aplicar el mentado efecto de desvanecimiento en los textos de las entradas, tal como en las imágenes, como aparece en el blog de ejemplo.

    Demás está decir que tienes un excelente blog, lo recomendaré a otros blogger acaso no lo conocían ya.

    Saludos.

    ResponderEliminar
  47. El código sería así:

    <div class="gradualfader">
    ...Aquí el contenido de la entrada...
    </div>

    ResponderEliminar
  48. Como hago para que mis imágenes salgan con fondo transparente y no fondo blanco este es mi Blog por favor ayudenme
    http://diakchimba.blogspot.com/

    ResponderEliminar
  49. Desconozco sí se pueda, el desvanecimiento en todos los scripts es blanco y no transparente o.O

    ResponderEliminar
  50. Hola! me parecio muy interesante este truco pero no consigo hacerlo funcionar, creo que no lo he hecho bien pero me gustaria que me ayudaras si no es molestia, meti los codigos antes de head y body pero nose si este truco vale para imagenes ya colgadas en el blog o solo para imagenes nuevas, gracias, espero respuestas!

    ResponderEliminar
  51. No importa si son imágenes nuevas o antiguas, sólo que debes agregar lo que se indica dentro del código de la imagen para hacerlo funcionar.

    ResponderEliminar
  52. Potro a mi no me funciona, he agregado los codigos grandes pero los codigos de las imagenes no se donde añadirlos puesto que todas las imagenes las añado desde mi PC, no desde internet.

    ResponderEliminar
  53. He añadido los codigos antes de head y body pero los codigos de las imagenes no se donde añadirlos puesto que las imagenes las subo directamente desde el disco duro :S

    ResponderEliminar
  54. Las imágenes tienes que subirlas a la red, no importa si las tomas de la PC o de otro sitio, pero deben estar subidas a la red.
    Si continuas con el problema indícame en cuál blog lo has puesto y en cuál sección de él para poder verificar dónde está el problema.

    Saludos.

    ResponderEliminar
  55. Es un blog de fútbol y cada vez que subo un post de una noticia, previa de partido o resultado postpartido pues siempre subo fotos de mi PC a blogger, la dirección es esta http://sevillistasinfronteras.blogspot.com y mi msn: jesunete@hotmail.com

    Saludos y gracias de antemano.

    ResponderEliminar
  56. Por ejemplo, en la imagen de la última entrada, así sería el código:

    <a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="http://1.bp.blogspot.com/_1ciy153Z1Ms/TNqJ8vja13I/AAAAAAAABWk/VD_gBvZe5lQ/s1600/cartelaquiseforma%255B1%255D.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 300px;" src="http://1.bp.blogspot.com/_1ciy153Z1Ms/TNqJ8vja13I/AAAAAAAABWk/VD_gBvZe5lQ/s400/cartelaquiseforma%255B1%255D.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5537890368455628658" class="gradualfader" /></a>

    Para ver el código de la imagen necesitas estar en la pestaña Edición de HTML y no en la de junto que se llama Redactar.
    Saludos.

    ResponderEliminar
  57. ya lo consegui! ya me funciona, muchas gracias

    ResponderEliminar
  58. Hola El Potro
    me podrias mandar el link del tutorial de como poner el bob espoja q tienes en la pagina de prueva(si tienes el tutorial)

    ResponderEliminar
  59. Muchas gracias por el blog potro, en verdad me sirvio mucho porque desconocia el uso de scripts y demas herramientas.
    Pero necesito preguntarte como configurar el host donde subo los scripts, porque no se muestran en mi sitio si entro como un usuario normal, es decir, tengo qe logearme en google (ya que use google sites como host) para que desde blogger me llame al script, de lo contrario no se me muesrta en mi sitio (www.mzcordoba.com.ar).
    Gracias por tu respuesta
    Exel

    ResponderEliminar
  60. hola me encanta el blog
    siempre chusmeo cosas para añadir a mi blog, queria aplicar este efecto pero tengo una duda, como hacer para que directamente quede en todas las imagenes que ya tengo en mi blog?? porque he visto varia gente que tiene este efecto en la totalidad de imagenes del blog.
    Muchas gracias ^^

    ResponderEliminar
  61. Exel, si los tienes en Google Sites entra a tu sitio, arriba donde dice 'Mas acciones' haz click y selecciona 'Compartir este sitio'. Ahi cambia los permisos para que todo mundo pueda ver los archivos que tienes alojados.

    Flor, se tiene que agregar manualmente a todas y cada una de las imagenes que quieres aplicarlo, no hay una forma automatizada de hacerlo. Saludos!

    ResponderEliminar
  62. Gracias por tu respuesta Potro, de hecho lo hice, pero no funcionó y eso era lo que me extrañaba. Por lo que instalé Dropbox, y acabé con el problema. :P

    ResponderEliminar
  63. wenas como puedo hacer que la imagen NO quede así de "apagada" en modo pasivo?

    ResponderEliminar
  64. k no se vea tan desvanecido antes de pasar el raton por encima pk se ve muy apagada la imagen en IE

    ResponderEliminar
  65. Tendrías que editar el script, es decir este:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js

    Ahí busca esta parte:
    gradualFader.baseopacity=0.4

    Ese 0.4 puedes cambiarlo por otro valor, luego sube el script a un hosting y cambia la URL del script por el tuyo y listo.

    ResponderEliminar
  66. hola potro si quieres llamame como quieras pero no se donde colocar el ulimo de lostres primeros codigos... en un elemento html/javascrit o desta dentro de los mismo codigo eso es lo que entiendo.... espero tu pronta respuesta

    ResponderEliminar
  67. Se agrega donde vayas a mostrar la imagen, si quieres ponerla por ejemplo en la sidebar entonces sí es en un elemento HTML/Javascript, pero si quieres mostrar la imagen en una entrada entonces agrega el código en una entrada.

    ResponderEliminar
  68. Potro, subi el archivo a mi almacenamiento de archivos, en este caso "MediaFire", y no funciona. Copie todo el codigo en un bloc de notas, al final le puse el .js , y lo subi pero cuando voy a ver el blog no funciona el truco. Si funciona al poner en link que nos das ahi,pero si por las dudas quisiera subirlo a mi propio host, no funciona.

    ResponderEliminar
  69. Lo que sucede es que MediaFire no te da el enlace para ejecutar o visualizar el archivo sino para descargarlo, por eso no te funciona.
    Necesitas subirlo a otro tipo de hosting como Google Sites o Dropbox.

    ResponderEliminar
  70. Potro! de nuevo estoy aqui! jaja..
    Tengo un pequeño problema, el efecto de opacidad con desvanecimiento no funciona si no entro a la cuenta de dropbox, cuando no estoy en la cuenta no funciona, queda todo de forma comun sin el efecto, cuando entro RECIEN funciona el efecto,sino no lo hace.

    ResponderEliminar
  71. Recuerda que los archivos se deben meter en la carpeta Public de Dropbox.

    ResponderEliminar
  72. Perfecto Potro,entonces con esto si o si funcionaria el Efecto?. Porque ya puse todos los Archivos dentro de la carpeta Public. Por cierto otra pregunta, los archivos de DropBox no se borran nunca?

    ResponderEliminar
  73. Moviste los archivos a la carpeta Public pero no cambiaste la URL del archivo pues ahora los archivos de Public tienen otra URL.
    Y no, no se borran a menos que tú lo hagas.

    ResponderEliminar
  74. Si yo me bajo el script, ¿a donde lo tengo que poner? así puedo ponerle un efecto más suave porque de la otra manera no sé como hacerlo.
    Está muy buena la pagina y gracias (:

    ResponderEliminar
  75. Hola Bren,

    Hay varios sitios para alojarlos, dos buenas opciones son Google Sites y Dropbox.

    ResponderEliminar
  76. Ajá, ¿cómo rayos hago si el efecto sólo me funciona en la página principal?, cuando voy a "entradas antiguas" & paso el cursor sobre alguna imagen no cambia ._.

    ResponderEliminar
  77. Es un problema que se trae Blogger con los enlaces de navegación y por esa razón muchos scritps (la mayoría) no funcionan dentro de esos enlaces.
    Ya Blogger informó hace unos días que está al tanto del problema y que lo solucionará a la brevedad así que habrá que esperar mientras eso sucede.

    ResponderEliminar
  78. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  79. Hola!soy completamente nueva tanto por tu blog como por el mio pero vaya.. ahí estoy intentando hacer mis pinitos..
    veamos, el caso, como hago para que el efecto desvanecimiento afecte solo a una imagen concreta y no a tooodas las del blog?
    muchas gracias y prometo seguir leyéndote y culturizandome por estos mundos!

    ResponderEliminar
  80. Hola Paula,

    ¡Bienvenida a Ciudad Blogger!
    El efecto no se aplica a todas las imágenes del blog, sólo a aquellas que tengan el class="gradualfader" que se menciona que se debe agregar al código de la imagen.
    Las que no tengan eso no tendrán el efecto de desvanecimiento.

    Saludos.

    ResponderEliminar
  81. Muchas gracias! La verdad que luego me di cuenta que lo explicabas también arriba.. ¬¬
    gracias de todas formas :)
    y a ver.. que te sigo dando mal.. se puede hacer que el efecto funcione al revés? que la imagen aparezca en su estado normal y que al pasar el cursor sea cuando pase a estar medio transparente?
    y luego, el efecto de desvanecimiento puedo aplicarlo de forma aislada por ejemplo a una imagen que se amplia o a un texto que ya tiene efectos hover? no se si me he explicado bien..
    gracias de antemano!
    saludos.

    ResponderEliminar
  82. Hola de nuevo Paula,

    Tendrías que editar el script, dentro buscar esta parte:

    gradualFader.baseopacity=0.4 //set base opacity when mouse isn't over element (decimal below 1)
    gradualFader.increment=0.1 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

    Y cambiarla por esta otra:

    gradualFader.baseopacity=0.1 //set base opacity when mouse isn't over element (decimal below 1)
    gradualFader.increment=0.4 //amount of opacity to increase after each iteration (suggestion: 0.1 or 0.2)

    A los textos no se puede aplicar, es únicamente para las imágenes.
    Saludos.

    ResponderEliminar
  83. Instalé este script en un blog y me funcionó perfecto. http://hushushchile.blogspot.com/
    Luego, repetí la operación, en otro sitio y no hay caso!
    http://www.mundofanfiction.com/
    De verdad que me gusta mucho, y ya no sé que hacer para que funcione.
    Le agregué bien el script, las imágenes tenían la etiqueta "gradualfader".
    No tendría porque fallar...

    ResponderEliminar
  84. El script de este efecto está alojado en Google Sites, muchas veces cuando se tiene un dominio propio por alguna razón los archivos en Google Sites dejan de funcionar, no siempre sucede, pero sí es común.

    Intenta alojar el script en otro servidor como Dropbox.

    El script al que me refiero es a este:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js

    Sólo copia esa URL, pégala en tu navegador y descarga el archivo, ese archivo es el que deberás subir en Dropbox y luego cambiar la URL de Google Sites por la nueva de Dropbox, con eso podría solucionarse el problema.

    ResponderEliminar
  85. Hola, que tal :) . Tengo una duda u.u . Como hago para que funcione exactamente? Adonde pego <img class="gradualfader" y eso ? :S

    ResponderEliminar
  86. Hola Flor Chiner,

    Ese último código va en donde quieras mostrar la imagen, por ejemplo, en una entrada.

    ResponderEliminar
  87. Ayuda Potro! Me fascina este efecto, pongo los códigos en el html , pero no sé bien como hacerlo en las imágenes! ¿Que puedo estar ahciendo mal?
    xoxo

    ResponderEliminar
  88. Hola Isabella, ¿exactamente en qué parte del blog lo has puesto? ¿Ya has colocado el código que va en las imágenes de las entradas?

    ResponderEliminar
  89. Holaaa quiero que esto quede directamente en todas las imagenes de mi blog!! como puedo hacer de alguna forma que no tenga que ponerlo entrada por entrada? Gracias !!

    http://delfina-redel.blogspot.com/

    ResponderEliminar
  90. No hay método automatizado, se tiene que hacer manualmente en cada imagen donde se quiera el efecto.
    Saludos.

    ResponderEliminar
  91. hola potro.
    puede ser que hallas eliminado este script?

    <script src='http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js' type='text/javascript'></script>


    es que lo estoy usando y de repente dejo de funcionar sin que hiciera ningun cambio en mi plantilla.

    bueno, eso nomas. gracias

    ResponderEliminar
  92. Nop, de hecho si ingresas a la URL del archivo verás que está funcionando:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js

    ResponderEliminar
  93. en realidad cuando ingreso me aparece este mensaje:
    Es posible que la página web https://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js esté temporalmente inactiva o que se haya trasladado definitivamente a otra dirección.

    de todas formas no hay problema. gracias!!

    ResponderEliminar
  94. Lo acabo de revisar y sigue funcionando, no sé si sea tu conexión, pero te recomiendo que mejor descargues el archivo y lo subas a tu hosting. Abajo de la entrada está en enlace de descarga.

    ResponderEliminar
  95. ya está funcionando de nuevo.
    no sé que habra pasado.

    igual voy a seguir tu consejo!!

    adios!!

    ResponderEliminar
  96. Hola potro, necesito -como casi todos- de tu ayuda, no sé cómo le hago para que, cada vez que hago un post, el slider automáticamente cargue la foto y un pequeño texto como referencia, porque hacerlo manual, en mi caso, está cañón, no me da tiempo, estoy utilizando la plantilla

    Blogger Template Style
    Name: Magda
    Author: Lasantha

    y mi dirección es:

    http://yoacusomultimedios.blogspot.com/

    Mucho te agradezco la mano que me puedas dar, porque en scrips estoy OUT.

    ResponderEliminar
  97. Hola Carlos,

    Me parece que en Pizcoz.net alguna vez vi un slider que mostraba las últimas entradas automáticamente, quizá quieras cambiarlo por ese, porque con ninguno de los que yo he publicado se puede hacer automáticamente.

    Saludos.

    ResponderEliminar
  98. Potro como pondría un texto sobre una imagen, y con un fondo medio trasparente, por ejemplo esta imagen: http://goo.gl/TzLcW

    Saludos!

    ResponderEliminar
  99. ¿Te refieres al slider?
    Hay varios de ellos, este es uno de los más usados por los lectores de aquí:
    http://ciudadblogger.com/2010/10/orbit-slider-de-imagenes-con-jquery.html

    ResponderEliminar
  100. No Potro, al slider no! a esta imagen http://img01.mundodeportivo.com/2011/10/09/Real-Madrid-s-Argentinian-forw_54228825008_54115221155_600_244.jpg que hay en esa entrada, donde sobre esa imagen verás un texto. gracias!

    ResponderEliminar
  101. Ahhhh no sabía que era tu otra personalidad :)
    Algo simple sería esto, para los estilos:

    #img-pie {
    position:relative;
    width:585px;
    }
    #img-pie .pie-foto {
    width:100%;
    position:absolute;
    bottom:0px;
    left:14px;
    text-align:center;
    background:url(http://css01.mundodeportivo.com/imagenes/bg/bg-piefoto.png);
    }

    Y la imagen:
    <div id="img-pie">
    <img src="http://img01.mundodeportivo.com/2011/10/09/Real-Madrid-s-Argentinian-forw_54228825008_54115221155_600_244.jpg" />
    <div class="pie-foto" style="color:#ffffff;">
    <p>Texto de la imagen</p>
    </div>
    </div>

    ResponderEliminar
  102. no puedooooo, nose no me sale :( alguien que me ayude

    ResponderEliminar
  103. ¿En dónde lo has puesto para poder ver qué puede estar pasando?

    ResponderEliminar
  104. yo entre como dice ahi, diseño edicion de html, y busque, head y body y lo puse, y lo ultimo no se como agregarlo, y aunque ponga los otros dos de cualquier manera, no funciona la opacidad :S

    ResponderEliminar
  105. El último paso es un código que debes poner en una entrada, en ese código deberás poner la URL de la imagen que quieres que tenga ese efecto de opacidad.

    ResponderEliminar
  106. osea, cuando publico la imagen, pongo eso ademas?

    ResponderEliminar
  107. Cuando quieras que una imagen tenga ese efecto usarás ese código, nada más.
    Mira aquí cómo obtener la URL de una imagen:
    http://ciudadblogger.com/2011/06/subir-imagenes-y-obtener-la-url-de-la.html

    ResponderEliminar
  108. Buenas tardes Potro.

    Potro como puedo poner este mismo efecto de opacidad combinado con las entradas resumidas estilo magazine (1). Es decir, lo que quiero es que automaticamente todas las imagenes que se muestren en las entradas resumidas en la pagina principal tengan este efecto, y que cuando estre al post todo este normal (sin efectos).

    Solo este efecto en las entradas resumidas.

    ResponderEliminar
  109. Hola zzz,

    Nunca lo he hecho ahí, pero tal vez si agregas la clase class="gradualfader" dentro del script, es decir, así:

    imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img class="gradualfader" src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';

    ResponderEliminar
  110. Muchas gracias Potro, usted es un verdadero maestro, funciono perfectamente, tal como queria.

    Muchisimas gracias por este sitio y por compartir.

    ResponderEliminar
  111. Por nada zzz, me alegra que te haya funcionado. Saludos.

    ResponderEliminar
  112. Jajaja, ¡de nuevo otra cosa más que añado! Mil gracias por el aporte, aunque me costó más de 10 minutos hacerlo porque tenía que incrustarlo en una imagen subida directamente desde la compu, pero encontré el lugar y perfecto.

    GRACIAAAAS!!! Qué grande eres!

    ResponderEliminar
  113. Por cierto, tengo una duda. En mi blog tengo puesto el gadget de un reloj; desearía que el fondo fuera transparente. Intenté modificarle el código para hacerlo transparente para lo novato que soy no lo consigo y ni sé si se pudiera hacer.

    ¿Alguna idea de cómo hacerlo?

    Gracias!

    ResponderEliminar
  114. Si es una imagen entonces tienes que conseguir una que ya tenga esa transparencia. Busca alguna en formato PNG o GIF que ya incluya el fondo transparente, pues como es una imagen no es algo que se modifique con códigos HTML.

    Saludos.

    ResponderEliminar
  115. ¿No hay una forma para aplicarlo a las imágenes de los posts,sin tener que agregar el código: <img src="URL de la imagen" class="gradualfader" />?

    ResponderEliminar
  116. Busca el código de la imagen dentro de la entrada y ahí agrega sólo:
    class="gradualfader"

    Pero sí tienes que hacerlo a cada una de las imágenes que quieras, con este método no hay forma automatizada.

    ResponderEliminar
  117. Hola Potro, este era el truco de desvanecimiento, no se por que pero no me sale, me gustaria que me expliques mejor como hacerlo

    ResponderEliminar
  118. No sé cómo explicarlo mejor Mechhita. Mejor dime exactamente qué parte no entiendes y en cuál blog lo has puesto, así vemos qué puede estar pasando.

    ResponderEliminar
  119. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  120. Hola Potro.

    De nuevo mis dudas y yo. Apliqué este efecto en una imagen de prueba, pero el problema es que al clicar en ella no me la maximiza en el blog como lo hacía sin el efecto, sino que lo hace en el mismo tamaño que está, y se ve muy chiquita para mi gusto. Sí me gustaría aplicar este efecto a cada imagen que iré publicando, pero si luego al clicar sobre ellas no me las maximiza pierde un tanto el potencial de la misma imagen.

    ¿Alguna sugerencia?

    Gracias!

    ResponderEliminar
  121. Hola Carlos,

    Usa el mismo código que te da Blogger al subir tu imagen, sólo agrega la clase class="gradualfader" dentro del código de tu imagen.
    Por ejemplo:

    <div class="separator" style="clear: both; text-align: center;">
    <a href="http://3.bp.blogspot.com/-V7YWiCSGSW0/ToYp93Y_uFI/AAAAAAAABso/9ZXlnuoWSD0/s1600/400_1315662791_793159-1024x768-sky.jpeg" imageanchor="1" style="clear:left; float:left;margin-right:1em; margin-bottom:1em"><img border="0" height="300" width="400" class="gradualfader" src="http://3.bp.blogspot.com/-V7YWiCSGSW0/ToYp93Y_uFI/AAAAAAAABso/9ZXlnuoWSD0/s400/400_1315662791_793159-1024x768-sky.jpeg" /></a></div>

    ResponderEliminar
  122. Gracias!

    Andaba haciéndolo así, pero ya descubrí por qué no salía haciendo pruebas. Cambié manualmente en el mismo html el height de 495 por 186 y el width de 640 a 240 (tomando de flickr los tamaños que me daba) de modo que aparece la imagen pequeña en la entrada y luego cuando se clica el original del enlace, que estoy poniendo la de tamaño mediano 640, así que queda perfecto.

    Gracias!!! Y felicitaciones por el nuevo aspecto de la página, me parece mucho más cómodo!

    ResponderEliminar
  123. Excelente Carlos, por eso dicen que la experimentación hace al maestro :)
    Qué bueno que te ha gustado el nuevo diseño, yo aún no me acostumbro, pero ya lo haré poco a poco :)

    ResponderEliminar
  124. Hola he cambiado a la inversa pero sigue sin aparecerme el efecto, este es el código: http://dl.dropbox.com/u/49397692/gradualfader.js

    Espero que puedas ayudarme y gracias desede ya.

    ResponderEliminar
  125. Hola Lautarorx, ¿en cuál blog lo has puesto?

    ResponderEliminar
  126. Holaa!(: he visto uno que cuando pasas el mouse sobre la imagen, la imagen se sacude, o se mueve, como es?

    ResponderEliminar
  127. Hola ✖ cαмίℓσ ✮,

    No sé si sea este al que te refieres:
    http://ciudadblogger.com/2010/03/efecto-de-sacudido-en-enlaces.html

    ResponderEliminar
  128. me explicas eso de la clase graduallfader es lo unico que me falta, vengo renegando hace dos meses con el truco y no lo puedo poner :(

    ResponderEliminar
  129. Si ya has puesto el script en tu plantilla entonces al código de alguna imagen ponle class="gradualfader"
    Con eso tendrás el efecto de desvanecimiento.

    ResponderEliminar
  130. No lo puse en ninguno porque no me anda jajaj ahora estoy usando el tuyo de la forma inversa en http://www.elecasoft.blogspot.com

    ResponderEliminar
  131. Disculpa Lautarorx pero es que me pierdo. Entiendo que estás usando el de esta entrada, ¿qué es lo que no te sale, o qué es exactamente lo que quisieras hacer?

    ResponderEliminar
  132. Yo queria hacer el efecto inverso pero no me anda el sript que te deje en el link, queria saber si hice algo mal.

    ResponderEliminar
  133. Hola Lautarorx,

    No hiciste nada mal. Erróneamente yo en un comentario dije que se podía pero no es así. Pero aun así, puedes aplicarlo sin necesidad de usar el script, es decir, con puro CSS.
    Si deseas hacerlo agrega antes de ]]></b:skin> esto:

    .opacidad img {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    }

    .opacidad img:hover {
    filter:alpha(opacity=100);
    -moz-opacity:0.9;
    -khtml-opacity: 0.9;
    opacity: 0.9;
    }

    Ya luego en tus imágenes agregas class='opacidad'

    ResponderEliminar
  134. Ah mirá vos, tal vez algun dia lo haga gracias ;) PD: no me gusta el sistema de comentarios de blogger :(

    ResponderEliminar
  135. Hola Potro.

    Tras comprar la .com sin tocar nada, pues todos los enlaces funcionan a la perfección, he visto un cambio que no entiendo, y es que la imagen que puse de prueba para una entrada ha dejado de tener este efecto, cuando ya lo tenía anteriormente. He ido a editar la entrada y figura todo como me indicaste en su momento.

    ¿Sabes a qué se puede deber y cómo arreglarlo?

    Gracias de antemano. Un abrazo!

    ResponderEliminar
  136. Hola Carlos,

    Hay un inconveniente que se da en los dominios propios y Google Sites, por alguna razón algunos archivos alojados ahí no funcionan cuando se aplican en dominios propios. No me preguntes por qué porque verdaderamente desconozco la razón.
    Lo mejor es que descargues el script y lo alojes en la plantilla o en otro alojamiento como Dropbox, ahí no tendrás problemas.

    Un abrazo.

    ResponderEliminar
  137. Gracias! Entiendo a medias, aunque la "solución" sí me sonó a chino, que en esto pese a los avances me siento muy muy novato. ¿Script? ¿Alojar en la plantilla o Dropbox? Ahí me perdí, jeje. Iré publicando entradas con dibujos propios a los que le añado este efecto. Dichas imágenes las subo a Flikr y de ahí el enlace. ¿Qué he de hacer exactamente? jejeje.

    Gracias de nuevo y disculpa mi torpeza. Un abrazo!

    ResponderEliminar
  138. En el primer código hay una URL que es esta:
    http://sites.google.com/site/ciudadbloggerscripts/archivos/gradualfader.js

    Esa URL es la dirección del script, que como ves está alojado en Google Sites.
    Necesitas entrar a esa dirección, guardar el archivo en tu ordenador, y ya que esté en tu equipo lo puedes subir a otro alojamiento como Dropbox:
    http://ciudadblogger.com/2010/04/como-usar-dropbox.html

    Ya que lo hayas subido consigue la URL de ese archivo y cámbiala por la de Google Sites que está en el primer código.

    Suena complicado, pero ya en la práctica verás que no lo es tanto ;)

    ResponderEliminar
  139. GRACIAAAAAAS!!!!

    Me pareció mucho más complicado al leerlo pero en la práctica sí es muy sencillo. Muchísimas gracias! De nuevo se hace realidad el lema "Con Potro no hay imposibles".

    Un abrazo!

    ResponderEliminar
  140. hola potro se puede hacer esto con texto... saludos

    ResponderEliminar
  141. Claro, sólo aplica el class="gradualfader" al DIV que contiene el texto:
    <div class="gradualfader">Aquí tu texto</div>

    ResponderEliminar
  142. Hola! Hasta body hice los pasos correctamente, pero donde explicas que hay que agregar class="gradualfader no se donde colocarlo, me podrias explicar? Soy medio torpe para esto :S Gracias :)

    ResponderEliminar
    Respuestas
    1. Hola Lucia., ese otro código lo agregas donde vayas a poner tu imagen, por ejemplo, en una entrada, ahí agrega el código de la imagen como se ejemplifica en el post.
      Saludos ;)

      Eliminar
  143. Hola Potro, no me funciona el truco te dejo la direccion de la imagen por si tienes tiempo de mirarla y la ubiques en el blog, no me aparece con el efecto esa imagen. subi a dropbox el scrip.


    imagen: http://i.imgur.com/hG10l.jpg

    esta en este blog:

    http://flaming-skulls-and-pentagrams.blogspot.com/

    ResponderEliminar
    Respuestas
    1. El script debe ir antes de </head>, tú lo has puesto dentro de los estilos de la plantilla.

      Eliminar
    2. Este comentario ha sido eliminado por el autor.

      Eliminar
    3. Me merezco un pequeño coscorron jaja, Ya funciona perfecto.!!!

      Saludos !!!

      Eliminar
    4. jajaja, vale, qué bueno que sólo era eso ;)

      Eliminar
  144. Una pregunta, como puedo activar nada mas unas cuantas imágenes?, esque al poner el script se activan todas las del enlace. saludos... Excelente truco, vale un 100.

    ResponderEliminar
  145. disculpa, mi error sucede al momento de querer enlazar la imagen a un vinculo.

    ResponderEliminar
    Respuestas
    1. Hola Oscar, sólo deben verse de esa forma las imágenes que tengan class="gradualfader" en su código, las demás, teniendo enlaces o no, no deben mostrarse con el efecto de opacidad.

      Eliminar
  146. Listo, muchas gracias, quedo excelente el efecto en el sitio.

    Saludos!!

    ResponderEliminar
  147. no entiendo donde tengo que poner esto class=gradualfader"/> .Explicame bien porfavorr

    ResponderEliminar
  148. Dentro del código de la imagen, por ejemplo, si pondrás la imagen en una entrada ahí debes poner el código de la imagen y la parte de class="gradualfader"

    ResponderEliminar
  149. ¡Hola Potro!
    Este efecto me pareció interesante y bastante útil... ya lo tengo en uso, pero, ¿no podría usarse en otros espacios que no sean ni entradas ni páginas?
    Gracias por tu ayuda :)

    ResponderEliminar
    Respuestas
    1. También se puede usar en los gadgets, en sí puedes usarlo casi en cualquier imagen siempre y cuando tengas acceso al código de ella para poder agrega el class="gradualfader"

      Eliminar
    2. Este comentario ha sido eliminado por un administrador del blog.

      Eliminar
  150. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  151. Buenas noches Potro!

    El truco no funciona en mi blog.. ojala pudieras ayudarme.. :(

    Muchas gracias.. :D

    ResponderEliminar
    Respuestas
    1. Buen día Wevoluciona, descarga el script y súbelo a otro hosting, los que usamos dominio propio no nos funcionan los archivos alojados en Google Sites.

      Eliminar
    2. Listo, muchas gracias Potro. Un abrazo

      Eliminar
  152. una pregunta para agregar el efecto en la plantilla para que se aplique en todas las entradas automatica mente

    ResponderEliminar
    Respuestas
    1. Este método no tiene forma automatizada, tendrías que conseguir algún otro sistema que lo haga.

      Eliminar
  153. no entendi el ultimo paso El último paso es sólo agregar la clase gradualfader a la imagen
    osea en donde va eso ???

    ResponderEliminar
    Respuestas
    1. En el código de tu imagen que uses en la entrada. Usa ese código en la entrada y es todo, sólo añade ahí la URL de tu imagen.

      Eliminar
  154. Oye Potro, tengo un problema=( No se por que, pero derrepende me di cuenta de que me dejo de funcionar esto en las imagen del gadget de la derecha... este mi blog: www.gold-tm.com
    Y lo unico que hice hoy es registrar mi dominio y cambiar la cabecera, no se que sera lo que paso para dejase de funcionar, asi que decidi preguntar a un experto como tu... Ayudame porfavor. Que hago? Gracias.

    ResponderEliminar
    Respuestas
    1. Lo que sucede es que los archivos subidos a Google Sites no funcionan en los dominios personalizados (ignoro por qué), así que debes descargar el archivo y subirlo a otro alojamiento.
      Saludos.

      Eliminar
  155. Pero si yo no he subido ningun archivo de aqui a ningun sitio. Oo
    Solo he puesto los codigos HTML en mi plantilla y ya esta....
    Si es necesario subir el archivo a algun sitio yo lo hago, pero me podrias explicar lo que debo hacer luego para configurar esta funcion en mi blog? Gracias_)

    ResponderEliminar
    Respuestas
    1. Tú no lo has subido, pero el primer código de esta entrada es un script que está alojado en Google Sites, ese ese el archivo que ahora no te funciona. Ahí verás que tiene una URL, esa URL es la del script, ábrela en tu navegador, se descargará el script, súbelo a otro hosting y luego cambia la URL de Google Sites por la del archivo que subiste.

      Eliminar
  156. hola potro tengo un problema estoy usando link de descarga directa de mf y el efecto de opacidad se desactiva en ese caso que se podria hacer

    ResponderEliminar
    Respuestas
    1. Prueba poner el class="gradualfader" dentro del enlace.

      Eliminar
  157. Hola querido amigo. He puesto en el blog un botón de AYUDA que me quedó perfecto por el link que me sugeriste de la imagen flotante estática. A este botón le he querido agregar el efecto de opacidad y NO HAY CASO no quiere. Puedes verlo por favor? http://kioscodecrochet.blogspot.com/ por las dudas dejo la dirección, aunque a esta ya debes tener pesadillas. jajaja =) El sistema de AYUDA me quedó bastante bien, pero no logro que las imágenes queden más nítidas para que puedan verlas sin tener que clickear.
    Un abrazo y te dejo otro problemita en Adsense que necesito de tus conocimientos sobre este tema. Saludos. =))

    ResponderEliminar
    Respuestas
    1. Hola, ¿cómo estás?
      ¿Qué método usaste para el efecto de opacidad? porque el que se menciona en esta entrada no lo veo.
      Con las imágenes, quizá pueda ayudar si cambias un pequeño datos en las URLs de ellas.
      Cuando subes la imagen verás en el HTML dos URLs dentro del código de la imagen, el segundo es el que hace que se muestre la imagen, en ella verás algo como esto:

      "http://1.bp.blogspot.com/-JS9L9BWXR00/UG6KkoHiabI/AAAAAAAAIws/ugJTEPmMmrE/s320/TUTORIAL%2B1%2BRENOVADO.jpg"

      Cambia ese s320 por s000
      Con eso deberá cargar la imagen en su tamaño original y por lo tanto deberá tener mejor resolución.
      Saludos.

      Eliminar
    2. Perdón por no responder enseguida. Cuando mencionaste que método usé, SI usé el de esta entrada y transcribo tal cual ya estaba puesto y aún lo está, salvo que cambié lo que mencionaste sobre s320 y s000 con la 2da. URL que también mencionas. El resto está igual, por eso me pregunto que viste, además está puesto justo antes de head y body como está en la entrada. Te ruego vuelvas a fijarte http://kioscodecrochet.blogspot.com/
      NOTA: Descargué el archivo como lo sugeriste por el ancho de banda y lo puse en mi Dropbox pero tu en la estructura cierras con (</script>) y yo lo pongo tal cual, pero cuando le doy GUARDAR me desaparece ese cierre, lo menciono porque no se si afecta o no. Y también me ocurre cuando escribo el código class=gradualfader que lo escribo después de la imagen y cuando GUARDO lo coloca dónde te lo muestro abajo.
      Yo hay cosas que no entiendo y por eso explico y transcribo como me sucede, tal vez sea normal pero como no sé y se que debo ser específico con los errores o detalles lo hago así.

      Esto que pasé a texto plano es tal cual lo tengo ahora en la plantilla, tu verás y me dices que puede andar mal.

      Gracias y nuevamente disculpas por no responder antes, mi señora ha tenido algunos temas de salud y mi cabeza anda en otra. Un abrazo mi querido amigo y hasta tus comentarios.



      <script src='https://dl.dropbox.com/u/65837752/gradualfader.js' type='text/javascript'/>



      <script type='text/javascript'>
      gradualFader.init() //activate gradual fader
      </script>




      <a href='http://kioscodecrochet.blogspot.com/p/tutorial-insignia-hola-bienvenidasal_3748.html '><img border='0' class='gradualfader' src='http://2.bp.blogspot.com/-HpksSjXiR_g/UG5VXZGMxWI/AAAAAAAAIp8/6Maib2Ss9lA/s1600/logo%2BAYUDA%2BACHICADO.jpg' style='position:fixed; bottom:0; right:0;'/></a>




      http://2.bp.blogspot.com/-HpksSjXiR_g/UG5VXZGMxWI/AAAAAAAAIp8/6Maib2Ss9lA/s000/logo%2BAYUDA%2BACHICADO.jpg

      Eliminar
    3. Prueba poner esta parte:
      <script type='text/javascript'>
      gradualFader.init() //activate gradual fader
      </script>

      Después del código de la imagen.

      Eliminar
    4. Maestro de los Maestros. Quedo GENIAAAAAAAL!!! Si estuviera cerca te daría un abrazote, pero igual te mando de acá uno enooormeee. Ese script estaba antes de la imagen, pero cuando me propones moverlo después de .... quedó genial.
      Muchas gracias y saludos. =)))

      Eliminar
    5. Me alegro que haya funcionado :)

      Eliminar
  158. No entiendo el ultimo paso .-.
    Eso de:
    agregar la clase gradualfader a la imagen

    #No entiendo!! Explicamelo

    ResponderEliminar
    Respuestas
    1. Sólo localiza el código de la imagen y pon lo que está en negrita.

      Eliminar
  159. Disculpa sabes como hacer para lograr este efecto pero para que se vuelvan en blanco y negrohttp://momokawonderland.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Con estos estilos:

      a img {
      filter: alpha (opacity=60);
      opacity: 0.60;
      transition: opacity 0.7s;
      -moz-transition: opacity 0.7s;
      -webkit-transition: opacity 0.7s;
      -o-transition: opacity 0.7s;
      -webkit-filter: grayscale(100%);
      }
      a img:hover {
      filter: alpha (opacity=1.0);
      opacity: 1.0;
      -webkit-filter: grayscale(0%);
      }
      img:hover {
      filter: alpha (opacity=60);
      opacity: 0.60;
      transition: opacity 0.7s;
      -moz-transition: opacity 0.7s;
      -webkit-transition: opacity 0.7s;
      -o-transition: opacity 0.7s;
      -webkit-filter: grayscale(0%);
      }
      img {
      filter: alpha (opacity=1.0);
      opacity: 1.0;
      -webkit-filter: grayscale(100%);
      }

      Eliminar
  160. Hola potro tengo esto en mi blog http://cocinandoconkisa.blogspot.com.es/ pero me gustaría que cuando se pase el ratón y la foto se ponga mas clara salga un texto en una esquina y al quitar el ratón la foto se quede normal y no salga el texto, sabes como se hace , el código que puse es este.



    ResponderEliminar
    Respuestas
    1. Hola kisa, entiendo el concepto pero no lo he hecho, cuando tenga algo de tiempo practico con algún código para ver si me sale y lo publico :)

      Eliminar
  161. Gracias potro , te iba a poner el codigo que tengo pero no me dejaba al mandarte el texto, te dejo el blog de Pamela para que veas en él lo que quiero hacer en el mio http://www.unodedos.com/

    ResponderEliminar
    Respuestas
    1. Parece que es con jQuery pero no conozco el script, después lo reviso con calma.

      Eliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger