Форум PHP программистов > CSS! Увеличение картинки

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Stasonix

8.10.2011 - 12:16

смотрите, есть 2 картинки рядом:


<div>
   <img class="img img1" src="#">
   <img class="img img2" src="#">
</div>

* {
  border-radius: 10px;    
}
div {
  position: absolute; left: 10%; top: 10%;
  width: 80%;
  height: 80%;  
  border: 1px solid #CCCCCC;
}

.img {
  position: relative;
  width: 30%;
  height: 30%;
  border: 2px solid black; 
}
.img1 {
 left: 10%; top: 10%;
}

.img:hover {
 width: 40%;
 height: 40%;
 left: 5%;
 top: 5%;
}

.img1:hover {
  left: 5%; top:5%;  
}
.img2  {
  top: 10%;  
  left: 10%;
}
.img2:hover {
  left: 5%; top:5%;   
}

при :hover они увеличиваются, но при этом соседняя сползает, а должна остатся на месте и увеличенная картинка должна ее просто перекрыть немного сбоку, фикс. позицию не имею возможности применить, все резиновое должно быть, будут какие-либо варианты или предложения что можно сделать?

p.s. смотрите fiddle: test1

Спустя 1 час, 32 минуты, 37 секунд (8.10.2011 - 12:49) Игорь_Vasinsky написал(а):

z-index наверно менять при hover нужно, или position на absolute, но видимо придётся до этого считать координаты картинки.

Спустя 30 минут (8.10.2011 - 13:19) Stasonix написал(а):

Цитата (Игорь_Vasinsky @ 8.10.2011 - 09:49)

z-index наверно менять при hover нужно, или position на absolute, но видимо придётся до этого считать координаты картинки.

z-index тут ни чем не поможет, я уже пробовал с ним и так и сяк, сосчитать коордианты конечно можно, но как-то это не то, не хочется лишние ДОМ-элементы создавать, вот в чем стык.

Спустя 4 минуты, 2 секунды (8.10.2011 - 13:23) Игорь_Vasinsky написал(а):

Тогда перепиши Lightbox2 , чтоб при hover работал

ВОт те готовое решение
http://ruseller.com/lessons.php?rub=32&id=159

Спустя 2 часа, 47 секунд (8.10.2011 - 15:23) Xes написал(а):

в ксс 3 есть фигня transporm или чето в этом роде она увеличивает наклоняет двигает и все в этом духе.

Спустя 5 минут, 59 секунд (8.10.2011 - 15:29) Xes написал(а):

Вот тута посмотри там куча примеров.
http://shpargalkablog.ru/2011/07/transformaciya-css.html
http://shpargalkablog.ru/2011/09/transform-css.html
http://shpargalkablog.ru/2011/09/transform-origin-css.html

Спустя 14 минут, 15 секунд (8.10.2011 - 15:44) Stasonix написал(а):

Цитата (Игорь_Vasinsky @ 8.10.2011 - 10:23)

Тогда перепиши Lightbox2 , чтоб при hover работал

ВОт те готовое решение
http://ruseller.com/lessons.php?rub=32&id=159

я же просил, никакой фиксации, сайт резиновый, все элементы резиновые, твой пример для меня не подходит, но все равно спасибо.

Спустя 2 дня, 4 часа, 12 минут, 10 секунд (10.10.2011 - 19:56) ceil100 написал(а):

Лови свое решение
Надеюсь я тебя правильно понял


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#wrap {width:900px;height:600px;border:1px #888 solid;margin:auto;}
		img {width:128px;height:128px;display:block;clear:right;float:left}
		img:hover {width:158px;height:158px;margin-left:-30px;}
	</style>
</head>
<body>
	<div id="wrap">
		<img src="1.png" alt="1" />
		<img src="2.png" alt="2" />		
	</div>
</body>
</html>

Если что-то не понятно спрашивай

для резинового сайта, вместо:

#wrap {width:900px;}

сделай:

#wrap {min-width:600px;max-width:900px;}

ну или сколько тебе надо
можешь поиграть с тем, куда картинка будет всплывать, с помощью margin's

Спустя 5 часов, 37 минут, 7 секунд (11.10.2011 - 01:33) Stasonix написал(а):

ceil100

а теперь смотри:


<div id="wrap">
        <img src="1.png" alt="1" />
        <img src="2.png" alt="2" />  
        <img src="3.png" alt="3" />   
</div>


#wrap {
    width:900px;
    height:600px;
    border:1px #888 solid;
    margin:auto;
 }
img {
     border: 1px solid black;
     width:128px;
     height:128px;
     display:block;
     clear:right;
     float:left
     }
img:hover {
     width:158px;
     height:158px;
     margin-left:-30px;
     margin-top: -15px;
 }

внимательнее посмотри

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

если что, вот fiddle: test2

Спустя 22 минуты, 22 секунды (11.10.2011 - 01:55) Игорь_Vasinsky написал(а):

img:hover {
     width:158px;
     height:158px;
     margin-left:-15px;
     margin-top: -15px;
 }

а так?

прикольный сервис.

Спустя 7 минут, 33 секунды (11.10.2011 - 02:03) Stasonix написал(а):

Цитата (Игорь_Vasinsky @ 10.10.2011 - 22:55)

а так?

увы, ни перекрывает правую фотку, она просто в сторону уходит, а должны на месте все фотки стоять

Спустя 2 минуты, 37 секунд (11.10.2011 - 02:05) Игорь_Vasinsky написал(а):

чёт мистика... а почему левую, верхнюю, нижнюю перекрывает, а правую нет?

может там у тя на JQuery чё нить замучено?

Спустя 15 минут, 10 секунд (11.10.2011 - 02:21) Stasonix написал(а):

Цитата (Игорь_Vasinsky @ 10.10.2011 - 23:05)

чёт мистика... а почему левую, верхнюю, нижнюю перекрывает, а правую нет?

может там у тя на JQuery чё нить замучено?

мистика во float: left, jquery тут вообще ни причем.

Спустя 4 минуты, 17 секунд (11.10.2011 - 02:25) Игорь_Vasinsky написал(а):

лан. разбирайся. нервный ты какой-то. желание пропадает.

Спустя 2 минуты, 30 секунд (11.10.2011 - 02:27) Stasonix написал(а):

Цитата (Игорь_Vasinsky @ 10.10.2011 - 23:25)

лан. разбирайся. нервный ты какой-то. желание пропадает.

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

Спустя 2 часа, 43 минуты, 49 секунд (11.10.2011 - 05:11) ceil100 написал(а):

Цитата

внимательнее посмотри

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

Я же написал : поиграй с margin's

Спустя 2 минуты, 51 секунда (11.10.2011 - 05:14) ceil100 написал(а):


<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<style type="text/css">
		#wrap {width:900px;height:600px;border:1px #888 solid;margin:auto;}
		img {width:128px;height:128px;float:left}
		img:hover {width:158px;height:158px;margin:-15px;}
	</style>
</head>
<body>
	<div id="wrap">
		<img src="1.png" alt="1" />
		<img src="2.png" alt="2" />		
		<img src="3.png" alt="3" />		
	</div>
</body>
</html>

В чем проблема-то?
Неужели никто не смог додуматься поделить отступы пополам?
Знатоки блин :o

Максимально просто
Все лишнее убрано
Картинка всплывает по центру

Спустя 8 часов, 1 минута, 20 секунд (11.10.2011 - 13:15) Stasonix написал(а):

Да! ceil100 вот это как раз то, что мне нужно! Никаких padding'ов, спасибо большое!

Спустя 9 месяцев, 1 день, 11 часов, 18 минут, 43 секунды (13.07.2012 - 00:34) qwrw написал(а):

ниче не получаетсо

Спустя 8 часов, 15 минут, 53 секунды (13.07.2012 - 08:50) Stasonix написал(а):

А пост-то стар как мир...

пост-скриптум фидл

Спустя 4 часа, 24 минуты, 9 секунд (13.07.2012 - 13:14) sebastjan написал(а):

Stasonix
Всё конечно хорошо но криво без игры с индексами.
Без яваскрипт не обойтись, так как получается настил одной картинки на другую.

Спустя 17 часов, 28 минут, 55 секунд (14.07.2012 - 06:43) Guest написал(а):

Ага, и z-index тут не выход: upd

Быстрый ответ:

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