html - tamaño - ¿Cómo hacer en CSS una superposición sobre una imagen?

tamaño de imagen html

Question

Estoy tratando de lograr algo como esto:

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?

Answer 1

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

<div class="image"></div>

Answer 2

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

<div class="image-container">
    <img src="http://lorempixel.com/300/200" />
    <div class="after">This is some content</div>
</div>

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

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet"/>

<div class="image-container">
    <img src="http://lorempixel.com/300/180" />
    <div class="after">
        <span class="content">This is some content. It can be long and span several lines.</span>
        <span class="zoom">
            <i class="fa fa-search"></i>
        </span>
    </div>
</div>

Answer 3

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.