Efecto Opacidad y Transparencia en Imágenes al Pasar el Mouse por Encima


Para utilizar este bonito efecto en las imágenes utilizaremos fade jQuery, el efecto consiste en crear opacidad en la imagen y al pasar el cursor por encima esta vuelve a su color original. Este efecto de opacidad y trasparencia en las imágenes lo puedes utilizar, tanto en las sidebar como en los post, o donde tú quieras sólo usa la imaginación. Puedes verlo funcionando en mi blog de pruebas.

Para empezar tenemos que tener la librería jQuery 1.2.6.js en nuestra plantilla, ojo es posible que ya la tengas, pero si no es así copia el siguiente código y pégalo justo antes de </head>:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/jquery-1.2.6.js' type='text/javascript'/>

Ahora añadiremos el script con el efecto, para ello copia y pega el siguiente código debajo del código que acabas de pegar:

<script src='http://dl.dropbox.com/u/3373498/PazosBlogger/opacidad.js' type='text/javascript'/>

Ahora ve a Diseño > Añadir gadget > elije HTML/Javascript y pega lo siguiente:

<a href="URL-del-enlace"><img class="fadeimagen" src="URL-de-tu-imagen" alt="nombre-imagen" /></a>

Cambia lo que está en rojo por tu propia información.
Si quieres que la opacidad sea más o menos opaca, bajate el script y verás que en la funsión "fadeTo" hay 3 variables que puedes configurar.

Vía | Bufa
Descargar Script

10 comentarios:

Cult el 10 de abril de 2010, 23:55 dijo...

Felicitaciones por tan maravilloso blog

Tus aportes son de lujo agregue un boton a mi blog CultMoviez

Te queria pedir un favor, ando con muchas ganas de agregar este slider http://2.ly/wah pero la verdad soy muy novato en esto

Gracias de antemano ojala me puedas ayudar

Saludos

cinemadeculto@gmail.com

Administrador el 11 de abril de 2010, 8:31 dijo...

Hola Watesam, gracias por tus palabras acerca del blog. La verdad es que es un slide muy bonito, veré si lo hago funcionar y lo postraré en este blog.

Saludos!

Cristian el 1 de septiembre de 2010, 11:29 dijo...

Se deben cerran los scripts con las respectivas etqiquetas "< / s c r i p t >" , sino solo anda en chrome.

VacilandoUnRap el 3 de octubre de 2010, 12:13 dijo...

Hola,se puede controlar la intensidad de la opacidad de las imagenes?

Saludos

Administrador el 3 de octubre de 2010, 12:29 dijo...

Hola MCarlitooH2, por supuesto, tienes que editar el script:

http://dl.dropbox.com/u/3373498/PazosBlogger/opacidad.js

Luego ajustas la función “fadeTo” al porcentajes que quieres que tenga de opacidad. Saludos!

VacilandoUnRap el 3 de octubre de 2010, 15:16 dijo...

Son muchos fadeTo exactamente cual tengo que editar?

Saludos men ;)

Anónimo dijo...

Hola Eduardo, añadi los codigos antes de head y body pero el ultimo codigo no se donde tengo que añadirlo, porque las imagenes que subo a mi blog son directamente desde el disco duro del PC y no se si el efecto vale para imagenes ya subidas anteriormente, gracias

Administrador el 11 de noviembre de 2010, 4:40 dijo...

Hola Jesús G, el último código tienes que ponerlo en tu post donde va a ir tu imagen que tendrá este efecto, o en un elemento HTML en la sidebar de tu blog.

Anónimo dijo...

Genial! Lo acabo de probar y va estupendamente!! Una consulta rápida... Tengo varias imágenes. Serí aposible que al clicar sobre una de ellas, se mantuviese el efecto de resaltado?? Es decir, al clicar, todas la imágenes queden "oscuras", excepto la que he clicado que quede resaltada. Cómo podría hacerlo?

Juliette♥ el 2 de octubre de 2011, 15:28 dijo...

Me funciono de lujo, pero se puede agregar a todo el blog? Y a las entradas (post) como las agrego?
Gracias

Quieres Comentar

Todos los comentarios están siendo leídos y moderados.

- Todos los comentarios deben ser relacionados con el artículo
- Serán borrados aquello comentarios que sean considerado SPAM
- Si quieren pedir ayuda,que no tenga nada que ver con el post, utilicen la página de Contacto
- Los comentarios serán publicados a la brevedad mínima posible

¿NO PUEDES COMENTAR?

¡Si no puedes ver la caja donde tienes que poner la palabras de verificación, has clic en donde dice "Verificación de palabras" y te saldrá la cajita donde tienes que ingresar la palabra!

NO TE OLVIDES DE RECOMENDAR PAZOSBLOGGER.COM A TUS AMIGOS

sábado, 6 de febrero de 2010

 

Ayuda para blog - Pazos Blogger Copyright 2010 | Template por:Brian Gardner | A Blogger por: Bloganol | Modificado y Diseñado por:Eduardo Sanguino