Hover

JoyStick · April 18, 2011

Суть проблемы такова, нужно правильно поставить hover.

Вот код html

 <body>

<div id="images">

<img src="images/6.jpg" width="130" height="120" />
<img src="images/7.jpg" width="120" height="140" />
<img src="images/8.jpg" width="130" height="120" /> 
<img src="images/2.jpg" width="120" height="140" />
<img src="images/5.jpg" width="130" height="120" />
<img src="images/1.jpg" width="120" height="140" />
<img src="images/2.jpg" width="130" height="120" />
<img src="images/1.jpg" width="120" height="140" />
<img src="images/5.jpg" width="130" height="120" />
<img src="images/3.jpg" width="120" height="140" />
<img src="images/8.jpg" width="130" height="120" />
<img src="images/7.jpg" width="120" height="140" />
<img src="images/5.jpg" width="130" height="120" />
<img src="images/8.jpg" width="120" height="140" />
<img src="images/2.jpg" width="120" height="140" />
<img src="images/5.jpg" width="130" height="120" />
<img src="images/1.jpg" width="120" height="140" />
<img src="images/3.jpg" width="130" height="120" />
<img src="images/4.jpg" width="120" height="140" />
<img src="images/6.jpg" width="130" height="120" />
<img src="images/7.jpg" width="120" height="140" />
<img src="images/8.jpg" width="130" height="120" /> 
<img src="images/2.jpg" width="120" height="140" />
<img src="images/5.jpg" width="130" height="120" />
<img src="images/1.jpg" width="120" height="140" />
<img src="images/2.jpg" width="130" height="120" />
<img src="images/5.jpg" width="130" height="120" />

  </div>

 </body>

CSS

#images {
	text-align: justify;
 }
#images img {
	max-height: 200px;
	max-width: 200px;
	margin:1px;
	vertical-align: middle;
	border:2px solid #fff;
	position:relative;
	z-index:10;
 }

#images:hover img {
	height: 250px;
	width: 250px;
	margin:1px;
	vertical-align: middle;
	border:2px solid #fff;
	position:relative;
	left:0; 
	top:0;
	z-index:20;
 }

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

flagreit · April 18, 2011

#images:hover img

#images img:hover

JoyStick · April 18, 2011

#images:hover img
#images img:hover

почти так) спс) вот только при увеличении нужно что бы соседние картинки не двигались... при увеличении она как бы вылазила вперед...

Justnewone · April 18, 2011

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

Потом в каждую ячейку вставляйте картинку.

ну а далее все просто.

Спанам всем релейтив.

картинкам при наведении позишн абсолют и ширину с высотой увеличенные, и топ, райт, лефт, боттом по вкусу.

JoyStick · April 18, 2011

сделайте сначала просто на спанах или на списках нужный лейаут, точь в точь, с размерами, грубо говоря, сетку.
Потом в каждую ячейку вставляйте картинку.
ну а далее все просто.
Спанам всем релейтив.
картинкам при наведении позишн абсолют и ширину с высотой увеличенные, и топ, райт, лефт, боттом по вкусу.

хм...не прокатит, тут вся фишка в том, что картинки растягиваются на всю ширину... списком точно не прокатит... тут нуна правильно ховер втулить... а вот как в этом вопрос...

psywalker · April 18, 2011

absolute;

хм...не прокатит, тут вся фишка в том, что картинки растягиваются на всю ширину... списком точно не прокатит... тут нуна правильно ховер втулить... а вот как в этом вопрос...

А что, абсолюты у нас уже не растягиваются? :facepalmxd:

JoyStick · April 18, 2011

absolute;
А что, абсолюты у нас уже не растягиваются?

может быть, но нужно обойтись без списка...

по другому ни как?

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

sytrus · April 18, 2011

В идеале такой эффект лучше делать с двух картинок (превью/увеличенная), если я правильно понял задачу. Потому что при увеличении одной из картинок место где она находилась будет высвобождаться и неувеличенные так или иначе сдвинуться! Если же сделать как написал Justnewone, то картинки остануться на своих местах, но спан с увеличенной картинкой будет пустым - не думаю, что это будет красиво смотреться!

JoyStick · April 18, 2011

В идеале такой эффект лучше делать с двух картинок (превью/увеличенная), если я правильно понял задачу. Потому что при увеличении одной из картинок место где она находилась будет высвобождаться и неувеличенные так или иначе сдвинуться! Если же сделать как написал Justnewone, то картинки остануться на своих местах, но спан с увеличенной картинкой будет пустым - не думаю, что это будет красиво смотреться!

это вариант... и по идее они не должны сдвигаться...

JoyStick · April 19, 2011

так что ни у кого нет никаких мыслей?

Great Rash · April 19, 2011

position: absolute;

Читайте внимательно что вам пишут в комментах.

psywalker · April 19, 2011

так что ни у кого нет никаких мыслей?

Уже написали выше, в какую сторону плыть.

Sign In

Hover

Question

Link to comment

Share on other sites

11 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information