Как на CSS сделать наложение прозрачной картинки? - Форум успешных вебмастеров

sydoow · 11.08.2011, 05:49

Подскажите плиз, как с помощью CSS сделать чтобы при наведении на картинку на неё накладывалась другая картинка прозрачная?
Пробовал с помощью

Код:

.product:hover  {background: url(a2.jpg) no-repeat;}

Но тогда она на заднем плане накладывается.

~~maxtrade~~ · 11.08.2011, 06:09

если сверху, то просто сделай еще один слой.

Код:

<div class="product">
   <div class="mask">
   Text here
   </div>
</div>

<style>
.mask:hover  {background: url(a2.jpg) transparent no-repeat top;}
</style>

Можно еще с z-index попробовать, но в 5 часов утра мне не хочется думать об этом

sydoow · 11.08.2011, 06:39

Чото не получилось (
Всё равно за передней картинкой новая появляется.

~~maxtrade~~ · 11.08.2011, 06:46

кинь в личку сайт

chesser · 11.08.2011, 06:59

тут может про z-index что-то?
или смотри, чтобы накладываемая картинка была нормальной ширины/длины

sydoow · 11.08.2011, 07:06

Хост лёг

~~maxtrade~~ · 11.08.2011, 07:12

Про z-index вот тут расписано http://htmlbook.ru/css/z-index
Создается несколько слоёв, притом один из них - самый верхний с наибольшим индексом.

Цитата:

#layer4 { z-index: 4; }

Я не могу без конкрнетно примера сделать, ТС, дай кусок кода, или страницу целиком

Либо можно сделать так: создать блок, а внутри него еще два, у обоих абсолютное позиционирование.

В первом блоке текст, а во втором, который находится отдельно, а не внутри первого, сам вернхний бекграунд (с z-index большим, чем у первого дива). Но для этого скорее всего придется использовать

Цитата:

display:inline-block;

Только это решение не кроссбраузерное, вернее можно сделать так

Цитата:

display: -moz-inline-box;
display: inline-block;
*zoom: 1;
*display: inline;
word-spacing: normal;

Это заставит IE обрабатывать как нужно, как на счет 6 версии и ниже - не знаю.

В общем пример нужен, так не могу нормально объяснить