Backgound-image поверх img

[EdBond]

Привет всем! Такой вопрос. Есть код:

html:

<img src="test.png">

css:

img:hover {
  background: url(test2.png);
}

Т.е. я хочу чтобы при наведении на img накладывалось изображение из background. А сейчас оно появляется ПОД img.

[Great Rash]

Создайте элемент поверх <img>, ему уже назначайте бэкграунд.

[Viper]

Т.е. я хочу чтобы при наведении на img накладывалось изображение из background. А сейчас оно появляется ПОД img.

Никак. Только через js(или canvas) менять изображение/путь.

[npofopr]

Или обе картинки поместите в css, и меняйте бэграунды.

[EdBond]

Эх жаль нет все-таки нормального решения

[Viper]

Эх жаль нет все-таки нормального решения

Так уж не хотеться делать один контейнер(wrap), в котором будет находиться данный img? Просто то, что ты хочешь даже не логично с точки зрения кода...ИМХО

[pismenny]

Я бы делал так.

<a href="#" class="rollover">
<img src="" alt="" width="" height="">  <!-- Фоновая картинка -->
</a>

a.rollover { 
	display: block; 
	width: ; /* ширина картинки */
	height: ; /* высота картинки */
	background: url() no-repeat; /* ссылка на основную картинку */
	overflow: hidden;
	} 

a.rollover img { 
	visibility: hidden; 
	} 

a.rollover:hover { 
	background: 0; 
	} 

a.rollover:hover img { 
	visibility: visible; 
	border: 0; 
	}

[gordio]

Можно так поигратся - песочница