¿Cómo hacer en CSS una superposición sobre una imagen?

Estoy tratando de lograr algo como esto:

este efecto

Cuando sobrevivo una imagen, me gustaría poner esa imagen de este color oscuro con texto y el ícono.

Estoy atrapado aquí. Encontré algunos tutoriales pero no funcionó en este caso. Además, otro problema: cada imagen tiene una altura diferente. El ancho es siempre el mismo

¿Cómo se puede lograr este efecto?

Puedes lograr esto con este simple CSS / HTML:

.image-container { position: relative; width: 200px; height: 300px; } .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } 

HTML

 
This is some content

Demostración: http://jsfiddle.net/6Mt3Q/


UPD : Aquí hay una buena demostración final con algunos estilos adicionales.

 .image-container { position: relative; display: inline-block; } .image-container img {display: block;} .image-container .after { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #FFF; } .image-container:hover .after { display: block; background: rgba(0, 0, 0, .6); } .image-container .after .content { position: absolute; bottom: 0; font-family: Arial; text-align: center; width: 100%; box-sizing: border-box; padding: 5px; } .image-container .after .zoom { color: #DDD; font-size: 48px; position: absolute; top: 50%; left: 50%; margin: -30px 0 0 -19px; height: 50px; width: 45px; cursor: pointer; } .image-container .after .zoom:hover { color: #FFF; } 
  
This is some content. It can be long and span several lines.

Puede usar un pseudo elemento para esto y tener su imagen en un vuelo estacionario:

 .image { position: relative; height: 300px; width: 300px; background: url(http://lorempixel.com/300/300); } .image:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; transition: all 0.8s; opacity: 0; background: url(http://lorempixel.com/300/200); background-size: 100% 100%; } .image:hover:before { opacity: 0.8; } 
 

Un poco tarde para esto, pero este hilo aparece en Google como un resultado superior al buscar un método de superposición.

Simplemente podrías usar un background-blend-mode

 .foo { background-image: url(images/image1.png), url(images/image2.png); background-color: violet; background-blend-mode: screen multiply; } 

Lo que hace es tomar la segunda imagen, y se mezcla con el color de fondo mediante el modo de mezcla múltiple, y luego combina la primera imagen con la segunda y el color de fondo mediante el modo de mezcla de pantalla. Hay 16 modos de fusión diferentes que podría usar para lograr cualquier superposición.

multiplicar, pantalla, superposición, oscurecer, aclarar, esquivar colores, quemar colores, luz tenue, luz tenue, diferencia, exclusión, matiz, saturación, color y luminosidad.