ссылка на ролловер для изменения фонового изображения

Question

есть ли способ изменить фон при переходе по ссылке? Я делаю веб-сайт для показа дипломов и хочу, чтобы при наведении ссылки на имя человека на фоновое изображение появлялось большое изображение. у меня появляется изображение, однако оно охватывает весь текст и находится в фиксированной позиции над ссылкой. Есть ли способ сделать это, чтобы он просто изменял фоновое изображение и оставался позади всего остального текста на странице?

вот что я работаю с

#hover_img img
{
display:none;
}

#hover_img:hover img
{
display:block;
position:absolute;
top:0px;
padding-top:0px;

}

HTML

  <div id="hover_img">LINK<img src="image" alt="" /></a></div>

спасибо!

** скрипка http://jsfiddle.net/5yhsL/ **

Answer 1

Вы можете сделать это, поместив текст внутри другого элемента рядом с элементом изображения. Абсолютно позиционированные элементы будут доминировать над своими соседями, и один из способов обойти это - присвоить значение свойству position для последующих элементов.

Вот jsfiddle, который я взбил:

http://jsfiddle.net/93mpW/3/

Answer 2

Добавить z-индекс: -1 к изображению при наведении курсора:

#hover_img:hover img
{
    display:block;
    position:absolute;
    top:0px;
    padding-top:0px;
    z-index: -1;
}