powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Увеличение фото по наведению курсора
5 сообщений из 5, страница 1 из 1
Увеличение фото по наведению курсора
    #38587470
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Здравствуйте.

На страничке выводятся три фотографии с подписью.
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
<div class="about-main">
					<h1>
						О нас
					</h1>
					<div class="our-photos">
						<div class="our-photo" id="our-photo1">
							<img class="about-photo" id="about-photo1" src="../views/photo/13.jpg"/>
							<p>подпись</p>
						</div>
						<div class="our-photo" id="our-photo2">
							<img class="about-photo" id="about-photo2" src="../views/photo/27.jpg"/>
							<p>подпись</p>
						</div>
						<div class="our-photo" id="our-photo3">
							<img class="about-photo" id="about-photo3" src="../views/photo/49.jpg"/>
							<p>подпись</p>
						</div>
					</div><!--.our-photos-->
					<div class="about-text">
						<p>Какой-то текст</p>
					</div>
				</div><!--.about-main -->


В css:
Код: css
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
		.about-main{
			margin-left:160px;
		}
		.about-main p{
			margin:10px 20px;
		}
		.about-main h1{
			margin: 5px 20px;
		}
		.our-photos{
			overflow: hidden;
			padding:40px 0;
		}
		.our-photo{
			float:left;
			padding:5px;
			/*border:1px solid green;*/
			border-radius: 5px;
			margin:5px;
		}
		.about-photo{
				width:150px;
				z-index: 10;
		}
			#our-photo1{
				-moz-transform: rotate(-10deg);
				-o-transform: rotate(-10deg);
				-webkit-transform: rotate(-10deg);
				-ms-transform: rotate(-10deg);
				margin-left: 35px;
				z-index: 0;
			}
			#our-photo2{
				z-index:0;
			}
			#our-photo3{
				-moz-transform: rotate(10deg);
				-o-transform: rotate(10deg);
				-webkit-transform: rotate(10deg);
				-ms-transform: rotate(10deg);
				z-index: 0;
			}

			#about-photo1:hover{
	            -webkit-transition: all 0.3s ease-in;
	            -moz-transition: all 0.3s ease-in;
	            -o-transition: all 0.3s ease-in;
	            -ms-transition: all 0.3s ease-in;
	            transition: all 0.3s ease-in;
	            width: 400px;
	            margin-right: -250px;
	            z-index: 300;
			}
			#about-photo2:hover{
	            -webkit-transition: all 0.3s ease-in;
	            -moz-transition: all 0.3s ease-in;
	            -o-transition: all 0.3s ease-in;
	            -ms-transition: all 0.3s ease-in;
	            transition: all 0.3s ease-in;
	            width: 400px;
	            margin-left: -200px;
	            z-index: 300;
			}
			#about-photo3:hover{
	            -webkit-transition: all 0.3s ease-in;
	            -moz-transition: all 0.3s ease-in;
	            -o-transition: all 0.3s ease-in;
	            -ms-transition: all 0.3s ease-in;
	            transition: all 0.3s ease-in;
	            width: 400px;
	            margin-left: -200px;
	            z-index: 300;
			}
			#about-photo1{
	            z-index: 0;
			}
			#about-photo2{
	            z-index: 0;
			}
			#about-photo3{
				z-index: 0;
			}


По наведению мыши фотографии увеличиваются. Но:
1. #about-photo3 - работает правильно.
2. #about-photo1 - увеличивается поверх #about-photo2, но ниже #about-photo3
3. #about-photo2 - увеличивается ниже #about-photo1 и #about-photo3

А как сделать, чтобы увеличивающаяся фотография отказывалась над остальными фотографиями?
...
Рейтинг: 0 / 0
Увеличение фото по наведению курсора
    #38587477
Фотография Areostar
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Тут JavaScript пользовать надо по любому
...
Рейтинг: 0 / 0
Увеличение фото по наведению курсора
    #38587479
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
А в JavaSctipt что делать? Менять z-index?
...
Рейтинг: 0 / 0
Увеличение фото по наведению курсора
    #38587513
ILLHEAD
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Павел ГужановА в JavaSctipt что делать? Менять z-index?з-индекс можно без js менять. в стилях
на ховер - максимальный, на не-ховер - 0
...
Рейтинг: 0 / 0
Увеличение фото по наведению курсора
    #38587524
Павел Гужанов
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Участник
Проблема решилась следующим образом:
к изображениям и дивам, в которых находятся изображения, добавил position: relative; также описал поведение по hover не только для изображений, но и для дивов.
...
Рейтинг: 0 / 0
5 сообщений из 5, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Увеличение фото по наведению курсора
Найденые пользователи ...
Разблокировать пользователей ...
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]