Текстовый слой под изображением HTML / CSS

Question

У меня есть картинка, которая исчезает при наведении.Как я могу разместить текст ниже / позади изображения?Так что, когда картинка исчезнет, ​​люди смогут увидеть текст.

Заранее спасибо.

Answer 1

Вы можете использовать абсолютное позиционирование и свойство CSS z-index:

img {
  position: absolute;
  top: 10px;
  left: 10px;

  z-index: 2;
}

img:hover {
  z-index: 0;
}

div {
  z-index: 1;
}

Полуфункциональная демоверсия: http://jsfiddle.net/Qsmzf/3/

Answer 2

Если для CSS изображения установлено значение position: absolute;, то можно установить свойство z-index для наложения текста. Возможно, вам придется поместить изображение в контейнер с position: relative;, так как абсолютное позиционирование может перемещать изображение.

Пример: http://jsfiddle.net/NPExr/

Answer 3

с использованием z-index должно это сделать

img
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}

Это должно поместить изображение поверх текста, а затем при наведении на него должен показать текст.