Как сделать в CSS наложение поверх изображения?

Я пытаюсь добиться чего-то подобного:

Когда я наводил изображение, я хотел бы наложить на этот образ этот темный цвет с текстом и значком.

Я застрял здесь. Я нашел несколько учебников, но они не работали для этого случая. Кроме того, другая проблема - каждое изображение имеет разную высоту. Ширина всегда одна и та же.

Как этот эффект может быть достигнут?

Ответ 1

Вы можете добиться этого с помощью этого простого 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>

Демо: http://jsfiddle.net/6Mt3Q/

UPD. Вот еще одна приятная финальная демонстрация с некоторыми дополнительными стилями.

.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>

Ответ 2

Вы можете использовать псевдоэлемент для этого и иметь свой образ при наведении:

.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>

Ответ 3

Немного поздно для этого, но этот поток появляется в Google как лучший результат при поиске метода наложения.

Вы можете просто использовать background-blend-mode

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

Что это значит, это второе изображение, и оно смешивает его с цветом фона, используя режим многократного смешивания, а затем смешивает первое изображение со вторым изображением и цветом фона, используя режим наложения экрана. Существует 16 различных режимов смешивания, которые можно использовать для достижения любого наложения.

умножить, экран, наложение, затемнение, осветление, уклонение цвета, цветной ожог, жесткий свет, мягкий свет, разность, исключение, оттенок, насыщенность, цвет и яркость.

Ответ 4

.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>