выделение изображением при наведении

[Roomas]

Здравствуйте!

Ребятушки такая вот дума!

CODE

<div class="class">                  
                    <div class="class2">
                    <a href="#"><img src= "images.png"></a>
                    </div>
                  </div>

—

CSS

.class {
	height: 146px;
	width: 147px;
	margin: 5px;
}
.class2 {
	height: 146px;
	width: 147px;
}
.class2 :hover {
	background-image: url(select.png);
	height: 146px;
	width: 147px;
}

—

Надо что бы изображение "выделитель" при наведение было с верху основного изображения,

как сделать подскажите, если не трудно!

[Simon]

http://htmlbook.ru/css/z-index

[Softlink]

Roomas, что значит "перекрыть"?

Судя по размерам блока, надо сделать так, чтобы основное изображение скрылось и появилась картинка из бэкграунда.

Это можно сделать так:

.class2 {
        background:#ccc;
        height: 52px;
        width: 70px;
}

a{
display:block;
height: 52px;
width: 70px;
}

.class2 img{
display:block;
height: 52px;
width: 70px;
position:relative;
}

.class2:hover img{
display:none;
}

<div class="class2">
     <a href="#"><img src= "images/5.png"></a>
</div>

Edited September 5, 2011 by Softlink

[Roomas]

С помощью z не могу ничего предпринять...

проще объяснить так:

есть картинка, надо чтобы при наведение над этой картинкой появлялась еще одна прозрачная png_шка!

как это сделать проще всего?

[Softlink]

есть картинка, надо чтобы при наведение над этой картинкой появлялась еще одна прозрачная png_шка!

как это сделать проще всего?

Поменять местами display.

Вот так http://jsfiddle.net/AgDXm/

[Roomas]

есть картинка, надо чтобы при наведение над этой картинкой появлялась еще одна прозрачная png_шка!

как это сделать проще всего?

Поменять местами display.

Вот так http://jsfiddle.net/AgDXm/

Огромная благодарность. Разобрался только вот еще один вопрос:

как сделать так, чтобы основная картинка была в коде,

а картинка которая при наведении выскакивает в цсс?

[Softlink]

как сделать так, чтобы основная картинка была в коде,

а картинка которая при наведении выскакивает в цсс?

а там именно картинка? Т.е. есть какое-то изображение на ней или это будет какой-то эффект для главного изображения? И еще, какие браузеры должны это понимать? Может это можно средствами одного css сделать?

[Roomas]

как сделать так, чтобы основная картинка была в коде,

а картинка которая при наведении выскакивает в цсс?

а там именно картинка? Т.е. есть какое-то изображение на ней или это будет какой-то эффект для главного изображения? И еще, какие браузеры должны это понимать? Может это можно средствами одного css сделать?

это картинка, над ней должна высвечиваться картинка со свечением, я думаю что можно конечно и border сделать с блюром, но хотелось бы конечно понять как сделать изображением...

[Softlink]

но хотелось бы конечно понять как сделать изображением...

как-то так http://jsfiddle.net/AgDXm/3/

еще чуток упростил

Edited September 5, 2011 by Softlink

[Roomas]

но хотелось бы конечно понять как сделать изображением...

как-то так http://jsfiddle.net/AgDXm/3/

еще чуток упростил

Вот так получилось:

CODE:

<div class="gamesSlot"> 

  <div class="game1">

  <a href="#"><img src= "images/games/screens/game.png">

  <span class="select"></span>

  </a>

</div>
</div> 

CSS

.gamesSlot {
	height: 146px;
	width: 147px;
	margin: 10px;
	border: none;
}
.game1 {
	height: 146px;
	width: 147px;
	background-repeat: no-repeat;
	border: none;
}
.game1 a{
		display: block;
		height: 146px;
		width: 147px;
		position:relative;
}
.game1 img {
		display: block;
		height: 146px;
		width: 147px;
		position:relative;
		border: none;
}

.select{
	display: block;
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 0;
	height: 146px;
	width: 147px;
	background-image: url(../../images/games/selecte.png);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	border: none;
}

a:hover .select{
visibility: visible;
}

ЗАЕ.ПИСЬ! РАБОТАЕТ! Благо дарю друже!

Edited September 5, 2011 by Roomas