Чорний прозорий наклад на зображення наближається лише до CSS?

Я намагаюся додати прозоре чорне накладення до зображення, коли миша наводить на зображення лише за допомогою CSS. Чи можливо це? Я спробував це:

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

Але я не можу змусити діва з’явитися.

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

Я б запропонував використовувати псевдоелемент замість елемента накладання. Оскільки псевдоелементи не можна додавати до закритих 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елемента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;
}

CSS3 фільтр

Хоча ця функція реалізована лише у веб-програмі, вона не має сумісності з браузером , але варто поглянути на:

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

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

Демонстрація JSFiddle

Список літератури

• https://dvcs.w3.org/hg/FXTF/raw-file/tip/filters/index.html
• http://www.html5rocks.com/en/tutorials/filters/understanding-css/
• https://developer.mozilla.org/en-US/docs/Web/CSS/filter
• http://davidwalsh.name/css-filters
• http://net.tutsplus.com/tutorials/html-css-techniques/say-hello-to-css3-filters/

Подібні теми щодо SO

• Як зменшити яскравість зображення в CSS
• Перетворіть зображення в масштаб сірого в HTML / CSS
• Визначені краї із розмиттям фільтра CSS3

Ви були поруч. Це спрацює:

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

Ось хороший спосіб використання: after на зображенні 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);}

.overlay не мали висоти чи ширини і не вмісту, і ви не можете навести курсор на курсор display:none .

Я натомість надав діву той же розмір і положення, що .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); }

Ви можете досягти цього, зігравши з непрозорістю зображення та встановивши чорний колір тла зображення. Роблячи зображення прозорим, воно буде темніше.

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

Вам може знадобитися встановити непрозорість для браузера, щоб зробити цю роботу і в інших браузерах.

Я б надавав міні-висоту та міні-ширину вашому накладному розміру розміру зображення та змінював колір фону на наведення курсора

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

Подивіться, що я тут зробив: 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}