Как сделать картинку поверх картинки при наведении?

Question

[Руслан Баночкин]

Долгое время не могу сделать простую штуку на блоге - чтобы при наведении на превью новости появлялась другая картинка. Встречал готовые варианты, но при интеграции в мой шаблон всё ломалось. ):

Химичить буду вот тут: blog.sk8er.name. Вот скриншот с тем, что требуется:



Буду благодарен за помощь!

Answer 1

[Everlier]

Самый очевидный вариант — положить в контейнер, сделать внутри него блок для фоновой картинки и блок для картинки, которая будет появлятся. И немного позиционирования или любой удобной вам магии :)

Comments

[Руслан Баночкин]

Не понял всё равно.

Answer 2

[s104]

Как вариант через псевдокласс.
:hover:after
jsfiddle.net/nhjtptha

Comments

[Руслан Баночкин]

Можно поподробней на моём примере конкретно? Не получается.

Answer 3

[Роман Якушев]

две картинки рядом внутри тега "a".
Вторая по умолчанию display:none
при наведении меняешь display:none первой
и display:block второй

p.s. они у тебя всё равно одинаковых размеров все

твой код:

<div class="alignleft post_thumbnail">
<a href="http://blog.sk8er.name/lytdybr/samoprezentaciya.html" title="$$$ Самопрезентация $$$">
<img width="190" height="130" src="/wp-content/plugins/kama-thumbnail/thumb/1017e5901_190x130.png" alt="$$$ Самопрезентация $$$">
</a>
</div>

твой код css в файле
blog.sk8er.name/wp-content/themes/sk8er/style.css
в строке 64:

.post_thumbnail {
background:none repeat scroll 0 0 #FFF;
box-shadow:0 0 3px #CCC;
margin:0 5px 5px 0;
padding:3px;
}

замените на

.post_thumbnail {
background:none repeat scroll 0 0 #FFF;
box-shadow:0 0 3px #CCC;
margin:0 5px 5px 0;
padding:3px;
}
.post_thumbnail > a {
	position:relative;
	display:block;
}
.post_thumbnail > a:before {
	display:none;
	content:'';
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background: url('<<путь к изображению>>');
}
.post_thumbnail > a:hover:before {
	display:block;
}

это как пример.
а вообще тебе стоит идти на htmlbook.ru

Comments

[Руслан Баночкин]

Что? Подробней можно?