¿Cómo oscurecer una imagen al pasar el mouse?

Mi problema ..¿Cómo oscurecer una imagen al pasar el mouse?

Tengo una serie de imágenes (dentro de hipervínculos), y quiero que cada uno a oscurecerse en mouseover (es decir, aplicar una máscara de negro de alta capacidad o algo así), y luego volver a la normalidad en mouseout. Pero no puedo encontrar la mejor manera de hacerlo.

He intentado ..

Jquery animado color y algunas referencias de JavaScript.
Configurando la opacidad de la imagen con javascript.

no quiero ..

Imagen inicial al 80% de opacidad y luego ir a 100% al pasar el ratón (eso es fácil).
Para cambiar entre 2 imágenes (una luz & uno oscuro), se olvidó la mención de este siento ..

Reiterar ..

que quiero en la imagen (inslide un hipervínculo) a oscurecerse en mouseover y luego pierde su oscuridad en mouseout.

¿Pensamientos?

ACTUALIZACIÓN:

Ésta es mi progreso de sugerencias. Se ve bien en IE8, pero no en FF3

<html> 
    <body> 
     <a href="http://www.google.com" style="background-color:black; opacity:1;filter:alpha(opacity=100)"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      style="opacity:1;filter:alpha(opacity=100)" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

¿Pensamientos?

- Lee

RESPUESTA

voy con esto (parece que funciona en IE8 & FF)

<html> 
    <head> 
     <style type="text/css"> 

     .outerLink 
     { 
      background-color:black; 
      display:block; 
      opacity:1; 
      filter:alpha(opacity=100); 
      width:200px; 
     } 

     img.darkableImage 
     { 
      opacity:1; 
      filter:alpha(opacity=100); 
     } 
</style> 
    </head> 

    <body> 
     <a href="http://www.google.com" class="outerLink"> 
      <img src="http://www.google.co.uk/intl/en_uk/images/logo.gif" width="200" 
      class="darkableImage" onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100" 
      onmouseover="this.style.opacity=0.6;this.filters.alpha.opacity=60" /> 
     </a> 
    </body> 
</html>

Fuente

2009-11-17 Lee Englestone

hay una opción para tener 2 imágenes diferentes, una luz y una oscura? – MalphasWats

Dorry Malphas, me olvidé de mencionar en mi pregunta que no quería di de esta manera, aunque vivas –

Podría ser que si tu "lo intentaste, no funcionó" (9_9 no creas que podrías proporcionar más información acerca de qué probaste exactamente y qué sucedió?) los escenarios no funcionaron, funcionarían si tu enlace y los elementos de imagen se configuran en CSS 'display: block' en lugar de su' display: inline' predeterminada. La configuración predeterminada puede restringir algunos de los efectos en cuestión a la altura de línea de los elementos en línea. – eyelidlessness

O, similar a la idea de erikkallen, haga que el fondo de la etiqueta A sea negro y haga que la imagen sea semitransparente al pasar el mouse sobre ella. De esta forma, no tendrás que crear divisiones adicionales.

CSS Only Fiddle (sólo funcionará en los navegadores modernos)
JavaScript based Fiddle (Will [probablemente] trabajar en todos los navegadores comunes)

Fuente de la solución basada en CSS:

a.darken { 
    display: inline-block; 
    background: black; 
    padding: 0; 
} 

a.darken img { 
    display: block; 

    -webkit-transition: all 0.5s linear; 
     -moz-transition: all 0.5s linear; 
     -ms-transition: all 0.5s linear; 
     -o-transition: all 0.5s linear; 
      transition: all 0.5s linear; 
} 

a.darken:hover img { 
    opacity: 0.7; 

}

Y la imagen:

<a href="http://google.com" class="darken"> 
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" width="200"> 
</a>

Fuente

2009-11-17 09:39:59 fresskoma

Lo intenté, no funcionó. –

+24

Esto definitivamente funciona. "No funcionó" no es una descripción del problema muy útil, por lo que debes buscar algo más específico o nadie podrá ayudarte. – fresskoma

Disculpas x3ro (y todo), intentaré ser más descriptivo en el futuro ;-) –

Deja un negro, semitransparente, div en la parte superior de eso.

Fuente

2009-11-17 09:37:46 erikkallen

Intentó, no funcionó. Si lo haces funcionar de esta manera, házmelo saber. –

¿Cómo lo haces transparente? Necesita algunos ajustes para obtener el navegador cruzado a la derecha (lo que jQuery hará por usted). – erikkallen

Cree png negro con, digamos, 50% de transparencia. Superponga esto al mouseover.

Fuente

2009-11-17 09:38:50 bitbonk

¿Qué tal esto ...

<style type="text/css"> 
    div.frame { background-color: #000; } 
    img.pic:hover { 
     opacity: .6; 
     filter:alpha(opacity=60); 
    } 
</style> 

<div class="frame"> 
    <img class="pic" src="path/to/image" /> 
</div>

Fuente

2009-11-17 09:55:05

Gracias Ei esto parece funcionar bien en FF pero no en IE8. ¿Alguna idea? –

Hazlo con Jquery, obtendrás una solución que funciona de manera cruzada en casi todos los navegadores. '$ ('# id_of_div'). css ('opacity',. 6);' –

me di cuenta que es un poco tarde, pero se podía añadir lo siguiente a su código. Sin embargo, esto no funcionará para png transparentes, necesitarás una máscara de recorte para eso. Lo que voy a ver ahora.

outerLink { 
    overflow: hidden; 
    position: relative; 
} 

outerLink:hover:after { 
    background: #000; 
    content: ""; 
    display: block; 
    height: 100%; 
    left: 0; 
    opacity: 0.5; 
    position: absolute; 
    top: 0; 
    width: 100%; 
}

Fuente

2010-12-13 00:00:12

Haga que la imagen sea 100% brillante, por lo que es clara. Y luego, sobre Img hover reduzca a cualquier brillo que desee.

img { 
 
    -webkit-transition: all 1s ease; 
 
    -moz-transition: all 1s ease; 
 
    -o-transition: all 1s ease; 
 
    -ms-transition: all 1s ease; 
 
    transition: all 1s ease; 
 
} 
 

 
img:hover { 
 
    -webkit-filter: brightness(70%); 
 
    filter: brightness(70%); 
 
}

<img src="http://dummyimage.com/300x150/ebebeb/000.jpg">

que lo hará, Espero que ayude

Fuente

2015-04-13 23:06:15

Deberías mover las transiciones a 'img {}', entonces no tienes que agregar 'filter: brightness (100%)'. – poxip

¿Cómo oscurecer una imagen al pasar el mouse?

Respuesta

Cuestiones relacionadas