Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.60/15: Рейтинг темы: голосов - 15, средняя оценка - 4.60
0 / 0 / 1
Регистрация: 18.09.2013
Сообщений: 79
1

Текст картинки на hover

17.08.2014, 10:25. Просмотров 2753. Ответов 7
Метки нет (Все метки)

добрый день, сверстал галерею, при наведении на картинку должно появляться текст с описанием ниже картинка
Текст картинки на hover

подскажите как на css можно это реализовать? ниже код .Спасибо.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article class="gallery">
            <div class="wraper">
                <h2>Галерея</h2>
                <ul>
                    <li><a href="#"><span class="desc">комната</span><img src="images/bedroom.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/mess_room.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/bathroom.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/drawing_room.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/dining_room.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/bedroom_2.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/bilayrd.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/spa.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/dining_caffe.png" alt="alt" /></a></li>
                </ul>
            </div>
        </article>

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
.gallery ul li{
    list-style-image:none;
    display:inline-block;
    vertical-align:top;
    margin:0px;
    padding:0px
}
 
.gallery .desc{
    display:none;
}
 
.wraper .desc:hover {
    display:block;
    position:absolute;
    font:12px "Verdana";
    color:#fff;
}
 
.gallery a{
    display:inline-block;
    vertical-align:top;
    margin:0px -4px -5px 0px;
    padding:0px
}
 
 
.gallery a:hover{
    opacity: 0.3;
}
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.08.2014, 10:25
Ответы с готовыми решениями:

:hover для картинки
как сделать чтобы при наведении на картинку она полностью менялась на другую? именно скрипт....

Hover эффект для картинки
Как реализовать такой hover эффект?

Смещение картинки с hover эффектом
Пмогите разобраться. При наведении на фото указателем мыши, картика смещается по осям x, y. При...

Hover-эффект для картинки
Png картинка служит кнопкой на моем сайте.Нужно чтобы при наведении ее цвет менялся.Можно ее...

7
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,713
Записей в блоге: 1
17.08.2014, 11:46 2
навскидку: при наведении блок с черным бэкграундом и opacity 0.5, включающий текст, получает z-index выше, чем у картинки. предварительно у него z-index отрицательный или display:none
1
102 / 102 / 39
Регистрация: 25.02.2014
Сообщений: 321
17.08.2014, 11:49 3
так же можно transition заюзать, для плавного перехода.
0
0 / 0 / 1
Регистрация: 18.09.2013
Сообщений: 79
17.08.2014, 12:15  [ТС] 4
навскидку: при наведении блок с черным бэкграундом и opacity 0.5, включающий текст, получает z-index выше, чем у картинки. предварительно у него z-index отрицательный или display:none
CSS
1
2
3
4
5
.wraper .desc:hover{
backgroun:#000;
opasity:0.3;
z-index:100;
}
я правильно вас понял?
0
511 / 485 / 161
Регистрация: 08.07.2013
Сообщений: 1,713
Записей в блоге: 1
17.08.2014, 12:25 5
Цитата Сообщение от B@ndit Посмотреть сообщение
.wraper .desc:hover{
backgroun:#000;
opasity:0.3;
z-index:100;
}
да, только в конце backgroun пропущена буква d
и предварительно спрятать блок
0
0 / 0 / 1
Регистрация: 18.09.2013
Сообщений: 79
17.08.2014, 12:55  [ТС] 6
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<article class="gallery">
            <div class="wraper">
                <h2>Галерея</h2>
                <ul>
                    <li><a href="#"><span class="desc">комната</span><img src="images/bedroom.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/mess_room.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/bathroom.png" alt="alt"/></a></li>
                    <li><a href="#"><img src="images/drawing_room.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/dining_room.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/bedroom_2.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/bilayrd.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/spa.png" alt="alt" /></a></li>
                    <li><a href="#"><img src="images/dining_caffe.png" alt="alt" /></a></li>
                </ul>
            </div>
        </article>
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
.gallery ul li{
    list-style-image:none;
    display:inline-block;
    vertical-align:top;
    margin:0px;
    padding:0px
}
 
.gallery .desc{
    display:none;
}
 
.wraper .desc:hover {
    background:#000;
    opacity:0.3;
    z-index:100;
    display:block;
    position:absolute;
    font:12px "Verdana";
    color:#fff;
}
 
.gallery a{
    display:inline-block;
    vertical-align:top;
    margin:0px -4px -5px 0px;
    padding:0px
}
 
 
.gallery a:hover{
    opacity: 0.3;
}
все крутиться вокруг списка! я задал как вы рекомендуете,не работает.
0
z-z
170 / 169 / 56
Регистрация: 22.06.2011
Сообщений: 980
17.08.2014, 13:07 7
Лучший ответ Сообщение было отмечено B@ndit как решение

Решение

Вот попробовал набросать что-то подобное

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<ul>
  <li>
    <div class="fon">fon</div>
    <div class="hover">hover</div>
  </li>
  <li>
    <div class="fon">fon</div>
    <div class="hover">hover</div>
  </li>
  <li>
    <div class="fon">fon</div>
    <div class="hover">hover</div>
  </li>
</ul>
</body>
</html>
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
li {
  list-style-type: none;
  display: inline-block;
  vertical-align: top;
  width: 100px;
  height: 100px;
  cursor: pointer;
  position: relative;
}
 
.fon{
  background: #f00;
  width: 100%; height: 100%;
}
 
.hover{
  position: absolute;
  width: 100%; height: 100%;
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  top: 0; left: 0;
  opacity: 0;
  transition: all 1s ease;
}
 
li:hover .hover {
  opacity: 1;
}
0
0 / 0 / 1
Регистрация: 18.09.2013
Сообщений: 79
17.08.2014, 13:37  [ТС] 8
работает, вам — огромное спасибо за помощь
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
17.08.2014, 13:37

Заказываю контрольные, курсовые, дипломные и любые другие студенческие работы здесь.

Как загрузить Hover картинки до onMouseOver
Есть иконки, и у каждой есть второй вариант показа, который прикреплен к Hover. Но когда...

Картинки с :hover из контента залазят на меню
Меню сайта - полоса сверху, всегда прижатая к верхнему краю браузера. Чтобы оживить картинки в...

Работа hover у картинки с появлением блока с информацией
Всем привет. Возникла проблемка. Есть блок с картинками, при hover на картинке появляется блок с...

Расположить картинки в виде ромбов рядом друг с другом (hover,onclick etc)
Есть 4 картинки (ромбы), надо расположить их, чтобы в итоге получился 1 ромб, соответственно блоки...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2020, vBulletin Solutions, Inc.