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


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