При наведении на ссылку появляется картинка. Как это сделать?

[scrobot]

Добрый день, столкнулся с такой проблемой при верстке, в прикрепленном файле показано что конкретно надо сделать. Вопрос только в том как? поискал инфу в гугле, попробовал пару вариантов, не получилось, возможно нужно использовать JS, и насколько я понимаю фреймворк JQ, проблема в том, что я довольно слабо знаю js пока, только основы, может кто подскажет где информацию найти о том как это сделать, а я там как-нибудь разберусь. Заранее спасибо.

 

[lekzd]

html

<a class="link" href="##"><img src="filepath"/></a>

css

.link {
position:relative;
}
.link img {
position: absolute;
display: none;
bottom:0px;
left: 0px;
}
.link:hover img{
display: block;
}

как-то так

 

[Den_Mak]

html

<a class="link" href="##"><img src="filepath"/></a>

css

.link {
position:relative;
}
.link img {
position: absolute;
display: none;
bottom:0px;
left: 0px;
}
.link:hover img{
display: block;
}

как-то так

А можно просто сделать ссылку (без <img>) и в :hover подписать background-image.

 

[tigra60]

А можно просто сделать ссылку (без <img />) и в :hover подписать background-image.

И в результате при наведении мыши картинка будет появляться с задержкой (из-за загрузки).
А чтобы этого не было, нужно сразу назначить background-image, только сместить ее позицию, чтобы не была видна, а по hover изменять background-position.
Гауптштурмфюрер Оффензихтлихкайт называет это спрайтом.

 

[Volter9]

А когда я хочу спрятать картинку на OpenGL я просто, делаю ей opacity: 0; но в СSS это не годится, все дочернии элементы будут иметь Опасити тоже 0.

 

[scrobot]

Спасибо всем кто откликнулся, оссобенное спасибо lekzd, мог бы еще бы плюсов 5 влепил бы. я закончил верстку и кто хочет её залинчевать милости прошу http://3wforums.ru/topic/11661-zalinchuite-verstku/ тему, думаю можно закрывать.