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