¿Superposición transparente negra en el desplazamiento de imagen con solo CSS?

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

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

Pero no puedo hacer que aparezca el 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 pseudo-elementos no se pueden agregar en los elementos de img incluidos, de todos modos deberá envolver el elemento img .

EJEMPLO EN VIVO AQUÍEJEMPLO CON TEXTO

 

En cuanto al CSS, establezca las dimensiones opcionales en el elemento .image y .image relativamente. Si busca una imagen receptiva, simplemente omita las dimensiones y esto seguirá funcionando (ejemplo) . Vale la pena señalar que las dimensiones deben estar en el elemento padre en oposición al elemento img sí, ver .

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

Dele al elemento img hijo un ancho del 100% del elemento primario y agregue vertical-align:top para corregir los problemas de alineación de línea de base predeterminados.

 .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 elemento .image . Un ancho / alto del 100% garantizará que esto funcione con diferentes dimensiones de img . Si desea hacer una transición del elemento, establezca una opacidad de 0 y 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; } 

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

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

RESULTADO FINAL AQUÍ


Si quieres agregar texto en el vuelo estacionario:

Para el enfoque más simple, simplemente agregue el texto como el valor del content 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 elemento img , es posible que no desee que aparezca el mismo texto al pasar el mouse. Por lo tanto, podría establecer el texto en un atributo data-* y, por lo tanto, tener texto único para cada elemento img .

EJEMPLO AQUÍ

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

Con un valor de content de attr(data-content) , el pseudo elemento agrega el texto del atributo de data-content de data-content del elemento .image :

 

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

EJEMPLO AQUÍ

En el ejemplo anterior, el pseudo elemento :after sirve como la superposición negra, mientras que el pseudo elemento anterior es el texto / caption. Dado que los elementos son independientes entre sí, puede usar un estilo separado 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 característica solo se implementa en webkit, y no tiene compatibilidad con el navegador , vale la pena echarle un vistazo a:

 .image img { max-width: 100%; max-height: 100%; -webkit-transition: .2s all; } .image img:hover { -webkit-filter: brightness(50%); } 

Demostración de JSFiddle

Referencias

Temas similares en SO

  • Cómo disminuir el brillo de la imagen en CSS
  • Convierta una imagen a escala de grises en HTML / CSS
  • Bordes definidos con desdibujado 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; } 

Necesitaba colocar el :hover colocar el :hover sobre la imagen y hacer que el .overlay cubra toda la imagen añadiendo right:0; y bottom:0 .

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

Esta es una buena forma de usar: después de la imagen div, en lugar de la div adicional superpuesta: http://jsfiddle.net/Zf5am/576/

 
.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);}

.overlay no tiene alto ni ancho ni contenido, y no se puede colocar el cursor sobre la display:none .

En su lugar, di al div el mismo tamaño y posición que .image y cambia el valor de RGBA .image el cursor sobre él.

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 configurando el color de fondo de la imagen en negro. Al hacer que la imagen sea transparente, aparecerá más oscura.

 

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 deba establecer la opacidad específica del navegador para que esto también funcione en otros navegadores.

Le daría un min-height y un min-width a su div de superposición del tamaño de la imagen, y cambiaría el color de fondo en flotación

 .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 estableces las dimensiones de la superposición, lo que significa que no se mostró en primer lugar. En segundo lugar, recomiendo simplemente cambiar el índice Z de la superposición cuando coloca el cursor sobre la imagen. Cambia la opacidad / color de la superposición para que se adapte a tus 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}