Черное прозрачное оверлейное изображение на изображении с помощью CSS?

Я пытаюсь добавить прозрачный черный оверлей к изображению всякий раз, когда мышь нависает над изображением только с помощью CSS. Это возможно? Я пробовал это:

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

Но я не могу заставить 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;
}

Ответы

Ответ 1

Я бы предложил использовать псевдоэлемент вместо элемента overlay. Поскольку псевдоэлементы не могут быть добавлены в закрытые элементы img, вам все равно придется обернуть элемент img.

ПРЯМОЙ ПРИМЕР ЗДЕСЬ - ПРИМЕР С ТЕКСТОМ

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

Что касается CSS, установите дополнительные размеры в элементе .image и относительно установите его. Если вы нацелены на отзывчивый образ, просто опустите размеры, и это все равно будет работать (пример). Стоит только отметить, что размеры должны быть в родительском элементе, а не в элементе img, см..

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

Дайте дочернему элементу img ширину 100% родителя и добавьте vertical-align:top, чтобы исправить проблемы выравнивания базовой линии по умолчанию.

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

Что касается псевдоэлемента, задайте значение содержимого и установите его по отношению к элементу .image. Ширина/высота 100% гарантирует, что это будет работать с изменяющимися размерами img. Если вы хотите переместить элемент, установите непрозрачность 0 и добавьте свойства/значения перехода.

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

Используйте непрозрачность 1 при зависании над псевдоэлементом, чтобы облегчить переход:

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

КОНЕЦ РЕЗУЛЬТАТ ЗДЕСЬ

Если вы хотите добавить текст при наведении:

Для простейшего подхода просто добавьте текст в качестве значения псевдоэлемента content:

ПРИМЕР ЗДЕСЬ

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

    /* Other styling.. */
}

Это должно работать в большинстве случаев; однако, если у вас есть несколько элементов img, вы можете не захотеть, чтобы один и тот же текст появлялся при наведении. Поэтому вы можете установить текст в атрибуте data-* и, следовательно, иметь уникальный текст для каждого элемента img.

ПРИМЕР ЗДЕСЬ

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

При значении content attr(data-content) псевдоэлемент добавляет текст из атрибута .image element data-content:

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

Вы можете добавить стиль и сделать что-то вроде этого:

ПРИМЕР ЗДЕСЬ

В приведенном выше примере псевдоэлемент :after служит черным наложением, тогда как псевдоэлемент :before является заголовком/текстом. Поскольку элементы не зависят друг от друга, вы можете использовать отдельный стиль для более оптимального позиционирования.

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

Ответ 2

Фильтр CSS3

Хотя эта функция реализована только в webkit, и у нее нет совместимости с браузером, но стоит взглянуть на:

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

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

Демо-версия JSFiddle

Рекомендации

Похожие темы

Ответ 3

Ты был близок. Это будет работать:

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

Вам нужно было поместить :hover на изображение и сделать .overlay обложкой всего изображения, добавив right:0; и bottom:0.

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

Ответ 4

Вот хороший способ использования: после на изображении div вместо дополнительного наложения div: 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);}

Ответ 5

.overlay не имел высоты, ширины и содержимого, и вы не можете навешивать над display:none.

Вместо этого я дал div того же размера и позиции, что и .image, и изменяет значение RGBA при наведении.

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

Ответ 6

Вы можете выполнить это, играя с непрозрачностью изображения и устанавливая цвет фона изображения на черный. Сделав изображение прозрачным, оно станет темнее.

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

Возможно, вам придется установить непрозрачность для браузера, чтобы сделать эту работу и в других браузерах.

Ответ 7

Я бы дал минимальную высоту и минимальную ширину для вашего наложения div размера изображения и изменил цвет фона при зависании

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

Ответ 8

Посмотрите, что я здесь сделал: http://jsfiddle.net/dyarbrough93/c8wEC/

Во-первых, вы никогда не устанавливаете размеры наложения, а это значит, что оно не появилось в первую очередь. Во-вторых, я рекомендую просто изменить z-индекс наложения при наведении на изображение. Измените прозрачность/цвет наложения в соответствии с вашими потребностями.

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