Iluminar una imagen usando estilos o Javascript

Me gustaría aclarar una imagen en mi página web al pasar el ratón sobre el mouse usando css o javascript. He visto algunos ejemplos que usan opacidad y filtros en estilos, pero no parecen funcionar para mí.Iluminar una imagen usando estilos o Javascript

Gracias de antemano

Fuente

2010-04-15 CP.

Sería útil si pudieras especificar de una manera más concreta lo que ya has intentado. –

[ACTUALIZACIÓN]

Una solución puro CSS sería utilizar CSS filters:

img:hover { 
    filter: brightness(1.5); 
}

Aquí añadimos% de brillo 50 a todos imágenes en vuelo estacionario.

¿Por qué no? Siempre puede establecer el fondo del contenedor principal en #fff (blanco) y luego reducir la opacidad de la imagen.

HTML:

<div class="white"> 
    <img src="image.jpg" alt="Image" /> 
</div>

CSS:

.white { background: #fff; } 
img:hover { 
    opacity: 0.5; 
    filter: alpha(opacity=50); 
}

Otra solución es utilizar una biblioteca JavaScript, como Pixastic.

Fuente

2010-04-15 10:21:29 Mickel

Me doy cuenta de CSS Mathew

Agregué otra sugerencia también, el uso de Pixastic: http://www.pixastic.com/lib/docs/actions/lighten/ – Mickel

Me sale el error filtro no es un nombre de propiedad css conocido opacidad no es un nombre de propiedad css conocido –

usaría algo liek:

filter: alpha(opacity=80); 
    opacity: 0.8;

Por lo que yo sé, esta es la única manera de lograr que en el CSS. ¿Es eso lo que buscas?

Fuente

2010-04-15 10:27:56 Ryan

Sí, puedo conseguir que aclare la imagen, pero no funciona con el mouseover, así que debo estar haciendo algo mal. img class = "mouseover" .mouseover img { opacidad: 0,3; filtro: alfa (opacidad = 30); } –

En este caso, cámbialo a: img.mouseover: hover {etc.} – Ryan

la clase debe aparecer inmediatamente después de la etiqueta. luego el selector, inmediatamente después de eso. entonces: tag.class: selector {etc.} – Ryan

Puede usar sprites CSS. Cree 2 versiones de la imagen: una normal, una brillante y combínelas en 1 imagen usando Photoshop o lo que sea que use.

Hay una buena explicación de qué sprites de CSS son here.

Por supuesto, esto puede no ser algo que pueda utilizar en su sitio. Por ejemplo, es probable que no sea algo que quieras usar en imágenes grandes (duplicarían su tamaño). Tampoco podría hacerlo de esta manera si las imágenes que desea aclarar provienen de fuentes externas o, por ejemplo, las suben los usuarios. Funcionaría bien para cosas como imágenes de barras de navegación y otros elementos de la interfaz de usuario.

Fuente

2010-04-15 12:15:46 thesonglessbird

Iluminar una imagen usando estilos o Javascript

Respuesta

Cuestiones relacionadas