При наведении на картинку накладывается другая картинка

@metamarfoz · Регистрация: 27.08.2009

Студворк — интернет-сервис помощи студентам

Как посредством css написать следующее: При наведении на картинку, на нее накладывается другая картинка, которую я сделал прозрачной. Данный метод нужен для видео, т.е при наведении на картинку появляется значок PLAY. Сделал через hover, но так картинка, которая должна накладываться, оказывается под первоначальной картинкой.

@maximkou · 12.04.2012, 14:43

для картинки в hover указать z-index.

Добавлено через 6 минут
Сейчас выложу вам примерчик небольшой.

Добавлено через 17 минут

HTML5
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
<html>
<head>
    <style type="text/css">
        #two
        {
            position: relative; top: -40px;width:40px; height: 40px; z-index: 50; opacity: 0.5;
        }
        #one
        {
            position: relative; z-index: 100;width:40px; height: 40px;
        }
        #one:hover
        {
            z-index: 10;
        }
        #two:hover
        {
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="width:40px; height: 40px;">
        <img id="one" src="img.jpg"/>
        <img id="two" src="img2.jpg"/>
    </div>
</body>
</html>
 
Например вот так, в нашем случае img2 лежит изнаально под начальной картинкой и ее прозрачность 50%

@metamarfoz · 12.04.2012, 14:56 **[ТС]**

Сообщение от maximkou

для картинки в hover указать z-index.

Добавлено через 6 минут
Сейчас выложу вам примерчик небольшой.

Добавлено через 17 минут

HTML5
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
<html>
<head>
    <style type="text/css">
        #two
        {
            position: relative; top: -40px;width:40px; height: 40px; z-index: 50; opacity: 0.5;
        }
        #one
        {
            position: relative; z-index: 100;width:40px; height: 40px;
        }
        #one:hover
        {
            z-index: 10;
        }
        #two:hover
        {
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="width:40px; height: 40px;">
        <img id="one" src="img.jpg"/>
        <img id="two" src="img2.jpg"/>
    </div>
</body>
</html>
 
Например вот так, в нашем случае img2 лежит изнаально под начальной картинкой и ее прозрачность 50%

Огромное спасибо.

Добавлено через 8 минут
Я понял как оно работает, но вот вопрос: сразу под картинкой у меня идет текст с отступом 5px. В вашем случаее текст идет с отступом равным высоте картинки, нельзя ли это как-то исправить?

@maximkou · 12.04.2012, 15:00

не совсем вас понял, возможно вы хотите так:

HTML5
1
2
3
4
5
6
7
<div style="width:40px; height: 40px;">
        <div>
              <img id="one" src="img.jpg"/>
              <img id="two" src="img2.jpg"/>
        </div>
        <div> Тут текст </div>
    </div>

@metamarfoz · 12.04.2012, 15:03 **[ТС]**

Да-да, а теперь посмотрите у себя в браузере, что получилось. У меня лично в Опере от картинки до текста отступ 200px/ Я вот и хочу узнать, как этот отступ настроить.

@maximkou · 12.04.2012, 15:08

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

т.е.

HTML5
1
2
3
4
5
6
7
<div style="width:40px; height: 40px;">
        <div height="40px">
              <img id="one" src="img.jpg"/>
              <img id="two" src="img2.jpg"/>
        </div>
        <div> Тут текст </div>
    </div>

27.07.2012, 03:57

Сообщение от maximkou

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

т.е.

HTML5
1
2
3
4
5
6
7
<div style="width:40px; height: 40px;">
        <div height="40px">
              <img id="one" src="img.jpg"/>
              <img id="two" src="img2.jpg"/>
        </div>
        <div> Тут текст </div>
    </div>

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

@newJS · 27.07.2012, 09:30

Правильно работает только с картинками не имеющими прозрачности

HTML5
1
2
3
4
5
6
TEXT TEXT TEXT
<div class="twoPics">
<img src="../pics/nichrom48.gif" alt="">
<img src="../pics/yandex48.gif" alt="" class="two">
</div>
text text text

CSS
1
2
3
4
5
.twoPics {position:relative; top:0; left:0;}
.twoPics img, .twoPics {width:48px; height:48px;}
.twoPics img {position:absolute; top:0; left:0;}
.twoPics img.two {opacity:0;}
.twoPics img.two:hover {opacity:1;}

Добавлено через 1 час 20 минут
Так с прозрачностью нормально

HTML5
1
2
3
TEXT TEXT TEXT
<div class="twoPics"></div>
text text text

CSS
1
2
3
4
5
6
7
8
9
10
11
.twoPics {width:48px; height:48px; border:0;}
 
/* если разные картинки */
.twoPics {background:url(../../pics/avant48.gif);}
.twoPics:hover {background:url(../../pics/yandex48.gif);}
 
/* если спрайт, картинка для спрайта вертикальная, 48х96 */
/*
.twoPics {background:url(../../pics/two_pic.gif);}
.twoPics:hover {background-position:0 48px;}
*/

27.07.2012, 22:44

Непонятно, это вы мне написали?

@LoopyHoopy · 25.10.2015, 23:31

Сообщение от maximkou

для картинки в hover указать z-index.

Добавлено через 6 минут
Сейчас выложу вам примерчик небольшой.

Добавлено через 17 минут

HTML5
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
<html>
<head>
    <style type="text/css">
        #two
        {
            position: relative; top: -40px;width:40px; height: 40px; z-index: 50; opacity: 0.5;
        }
        #one
        {
            position: relative; z-index: 100;width:40px; height: 40px;
        }
        #one:hover
        {
            z-index: 10;
        }
        #two:hover
        {
            z-index: 100;
        }
    </style>
</head>
<body>
    <div style="width:40px; height: 40px;">
        <img id="one" src="img.jpg"/>
        <img id="two" src="img2.jpg"/>
    </div>
</body>
</html>
 
Например вот так, в нашем случае img2 лежит изнаально под начальной картинкой и ее прозрачность 50%

Использовал ваш код но теперь не могу выставить 4 кнопки в одну линию. Будет какой то совет?

Новые блоги и статьи Все статьи Все блоги /
Символьное дифференцирование igorrr37 13.02.2026 / * Логарифм записывается как: (x-2)log(x^2+2) - означает логарифм (x^2+2) по основанию (x-2). Унарный минус обозначается как ! */ #include <iostream> #include <stack> #include <cctype>. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»
SDL3 для Web (WebAssembly): Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 12.02.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами и вызывать обработчики событий столкновения. . . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 11.02.2026 Содержание блога Библиотека SDL3 содержит встроенные инструменты для базовой работы с изображениями - без использования библиотеки SDL3_image. Пошагово создадим проект для загрузки изображения. . .	SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .

@metamarfoz 2 / 2 / 1 Регистрация: 27.08.2009 Сообщений: 106

	При наведении на картинку накладывается другая картинка 12.04.2012, 14:17. Показов 19447. Ответов 9 Метки нет (Все метки) Как посредством css написать следующее: При наведении на картинку, на нее накладывается другая картинка, которую я сделал прозрачной. Данный метод нужен для видео, т.е при наведении на картинку появляется значок PLAY. Сделал через hover, но так картинка, которая должна накладываться, оказывается под первоначальной картинкой. 0

@metamarfoz 2 / 2 / 1 Регистрация: 27.08.2009 Сообщений: 106
	12.04.2012, 15:03 [ТС]
	Да-да, а теперь посмотрите у себя в браузере, что получилось. У меня лично в Опере от картинки до текста отступ 200px/ Я вот и хочу узнать, как этот отступ настроить. 0

abasive
	27.07.2012, 22:44
	Непонятно, это вы мне написали?