¿Superposición transparente negra en la imagen flotante con solo CSS?

Estoy tratando de agregar una superposición negra transparente a una imagen cada vez que el mouse se desplaza sobre la imagen con solo CSS. es posible? Probé esto:

http://jsfiddle.net/Zf5am/565/

Pero no puedo hacer que aparezca el div.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
    <div class="overlay" />
</div> 

.image {
  position: relative;
  border: 1px solid black;
  width: 200px;
  height: 200px;
}
.image img {
  max-width: 100%;
  max-height: 100%;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
  background-color: red;
  z-index: 200;
}
.overlay:hover {
  display: block;
}

Sugeriría usar un pseudo elemento en lugar del elemento de superposición. Debido a que los pseudoelementos no se pueden agregar en imgelementos adjuntos , aún necesitaría envolver el imgelemento.

EJEMPLO EN VIVO AQUÍ - EJEMPLO CON TEXTO

<div class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

En cuanto al CSS, establezca dimensiones opcionales en el .imageelemento y colóquelo relativamente. Si está apuntando a una imagen receptiva, simplemente omita las dimensiones y esto seguirá funcionando (ejemplo) . Vale la pena señalar que solo las dimensiones deben estar en el elemento primario en comparación con el imgelemento en sí, ver .

.image {
    position: relative;
    width: 400px;
    height: 400px;
}

Asigne al imgelemento secundario un ancho del 100%principal y agregue vertical-align:toppara solucionar los problemas de alineación de la línea de base predeterminada.

.image img {
    width: 100%;
    vertical-align: top;
}

En cuanto al pseudo elemento, establezca un valor de contenido y colóquelo absolutamente en relación con el .imageelemento. Un ancho / alto 100%asegurará que esto funcione con diferentes imgdimensiones. Si desea realizar la transición del elemento, establezca una opacidad 0y agregue las propiedades / valores de transición.

.image:after {
    content: '\A';
    position: absolute;
    width: 100%; height:100%;
    top:0; left:0;
    background:rgba(0,0,0,0.6);
    opacity: 0;
    transition: all 1s;
    -webkit-transition: all 1s;
}

Utilice una opacidad de 1al pasar el cursor sobre el pseudo elemento para facilitar la transición:

.image:hover:after {
    opacity: 1;
}

FINALIZAR EL RESULTADO AQUÍ

Si desea agregar texto al pasar el mouse:

Para el enfoque más simple, simplemente agregue el texto como el contentvalor del pseudo elemento :

EJEMPLO AQUÍ

.image:after {
    content: 'Here is some text..';
    color: #fff;

    /* Other styling.. */
}

Eso debería funcionar en la mayoría de los casos; sin embargo, si tiene más de un imgelemento, es posible que no desee que aparezca el mismo texto al desplazarse. Por lo tanto, podría establecer el texto en un data-*atributo y, por lo tanto, tener un texto único para cada imgelemento.

EJEMPLO AQUÍ

.image:after {
    content: attr(data-content);
    color: #fff;
}

Con un contentvalor de attr(data-content), el pseudo elemento agrega el texto .imagedel data-contentatributo del elemento :

<div data-content="Text added on hover" class="image">
    <img src="http://i.stack.imgur.com/Sjsbh.jpg" alt="" />
</div>

Puede agregar un poco de estilo y hacer algo como esto:

EJEMPLO AQUÍ

En el ejemplo anterior, el :afterpseudo elemento sirve como superposición negra, mientras que el :beforepseudo elemento es el título / texto. Dado que los elementos son independientes entre sí, puede utilizar estilos separados para un posicionamiento más óptimo.

.image:after, .image:before {
    position: absolute;
    opacity: 0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.image:after {
    content: '\A';
    width: 100%; height:100%;
    top: 0; left:0;
    background:rgba(0,0,0,0.6);
}
.image:before {
    content: attr(data-content);
    width: 100%;
    color: #fff;
    z-index: 1;
    bottom: 0;
    padding: 4px 10px;
    text-align: center;
    background: #f00;
    box-sizing: border-box;
    -moz-box-sizing:border-box;
}
.image:hover:after, .image:hover:before {
    opacity: 1;
}

Filtro CSS3

Aunque esta función solo se implementa en webkit y no tiene compatibilidad con el navegador , vale la pena echarle un vistazo:

.image img {
    max-width: 100%;
    max-height: 100%;
    -webkit-transition: .2s all;
}

.image img:hover {
    -webkit-filter: brightness(50%);
}

Demostración de JSFiddle

Referencias

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Temas similares sobre SO

• Cómo disminuir el brillo de la imagen en CSS
• Convertir una imagen a escala de grises en HTML / CSS
• Bordes definidos con desenfoque de filtro CSS3

Estabas cerca. Esto funcionará:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; }
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; right:0; bottom:0; display: none; background-color: rgba(0,0,0,0.5); }
.image:hover .overlay { display: block; }

Necesitabas poner la :hoverimagen y hacer la .overlayportada de la imagen completa agregando right:0;y bottom:0.

jsfiddle: http://jsfiddle.net/Zf5am/569/

Aquí hay una buena manera de usar: after en el div de la imagen, en lugar del div de superposición adicional: http://jsfiddle.net/Zf5am/576/

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div>

.image {position:relative; border:1px solid black; width:200px; height:200px;}
.image img {max-width:100%; max-height:100%;}
.image:hover:after {content:""; position:absolute; top:0; left:0; bottom:0; right:0; background-color: rgba(0,0,0,0.3);}

.overlayno tenía una altura o un ancho y no tenía contenido, y no puede pasar el cursor por encima display:none.

En cambio, le di al div el mismo tamaño y posición que .imagey cambia el RGBAvalor al pasar el mouse.

http://jsfiddle.net/Zf5am/566/

.image { position: absolute; border: 1px solid black; width: 200px; height: 200px; z-index:1;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background:rgba(255,0,0,0); z-index: 200; width:200px; height:200px; }
.overlay:hover { background:rgba(255,0,0,.7); }

Puede lograr esto jugando con la opacidad de la imagen y estableciendo el color de fondo de la imagen en negro. Al hacer que la imagen sea transparente, aparecerá más oscura.

<div class="image">
    <img src="http://www.newyorker.com/online/blogs/photobooth/NASAEarth-01.jpg" alt="" />
</div> 

CSS:

.image { position: relative; border: 1px solid black; width: 200px; height: 200px; background: black; }
.image img { max-width: 100%; max-height: 100%; }
.image img:hover { opacity: .5 }

Es posible que también deba configurar la opacidad específica del navegador para que esto funcione también en otros navegadores.

Le daría una altura mínima y un ancho mínimo a su div de superposición del tamaño de la imagen, y cambiaría el color de fondo al pasar el mouse

.overlay { position: absolute; top: 0; left: 0;  z-index: 200; min-height:200px; min-width:200px; background-color: none;}
.overlay:hover { background-color: red;}

Vea lo que he hecho aquí: http://jsfiddle.net/dyarbrough93/c8wEC/

En primer lugar, nunca estableciste las dimensiones de la superposición, lo que significa que no se mostraba en primer lugar. En segundo lugar, recomiendo simplemente cambiar el índice Z de la superposición cuando pasa el cursor sobre la imagen. Cambie la opacidad / color de la superposición para adaptarla a sus necesidades.

.image { position: relative; width: 200px; height: 200px;}
.image img { max-width: 100%; max-height: 100%; }
.overlay { position: absolute; top: 0; left: 0; background-color: gray; z-index: -10; width: 200px; height: 200px; opacity: 0.5}
.image:hover .overlay { z-index: 10}