En una entrada anterior habíamos visto cómo añadir opacidad a una imagen y agregarle texto encima; lo que vamos a ver hoy es algo similar , sólo que la imagen se va a poner opaca al pasar el mouse:
Para conseguirlo es muy sencillo, bastará con usar el siguiente código:
<img src="URL-imagen" width="500" height="375" onmouseout="this.style.opacity=1;this.filters.alpha.opacity='100';" onmouseover="this.style.opacity=0.2;this.filters.alpha.opacity='20';"/>
» Cambiaremos width="500" height="375" por el ancho y el alto de la imagen respectivamente.
A este código podemos darle infinidad de usos: por ejemplo para añadir el efecto a las banderitas de un traductor o a los marcadores sociales, todo esto lo veremos en próximos post.
5 opinaron:
Genial, me encanta el efecto!
Muy buen efecto, esperaré tus próximas entradas sobre los usos que le darás a este código :)
Besos
Me gusta, queda muy original y el efecto es muy fino
encantador el efecto tesoro...has elegido violetas, mi florcita preferida :D
Besos
» G: gracias :)
» squirrel: ya pronto las publicaré.
» La inquisidora: tienes razón.
» Graciela de Palomas: también a mi me encantan las violetas y me encanta que te haya gustado el efecto.
S@lu2
Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"
Gracias por participar en el blog.