Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.50/4: Рейтинг темы: голосов - 4, средняя оценка - 4.50
AD86
0 / 0 / 0
Регистрация: 14.05.2015
Сообщений: 52
1

Затемнение блоки пр наводке мыши

12.02.2020, 17:00. Просмотров 790. Ответов 2
Метки нет (Все метки)

Добрый день нашел в интернете как сделать затемнение с выводом текста при наводке на div блок курсор мыши. Все работает но вот вопрос я в div помещаю элемента <p> с текстом и при наводке мыши один тег <p> выводит а второй нет. Я уже и оборачивал и в div и <span>.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
<div class = "block__goods_item">
          <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
                        <div><p>Text</p><p>Text1</p></div></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img"><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img"><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img"><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img"><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src=""><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src=""><p>Текст</p></div>
         <div class="block__goods_item_product"><img class="block__goods_item_product_image" src=""><p>Текст</p></div>
                </div>
Мой 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
.block__goods_item{
    display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 280px;
 
}
 
.block__goods_item_product {
    width: 33.333%;
    position: relative;
  }
 
  .tr{
    background:url(../img/home-7.jpg);
  }
.block__goods_item_product:after {
    content: " ";
    display: block;
    padding-top: 100%;
  }
  .block__goods_item_product_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  
  .block__goods_item_product > div {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    font-size: 30px;
    font-weight: 700;
    font-family: 'Segoe UI';
    line-height: 300px;
    text-align: center;
    color: #fff;
    transition: opacity .5s,background-color .5s;
}
  
  .block__goods_item_product:hover div {
    opacity: 1;
    background: rgba(0, 0, 0, 0.5);
    cursor: pointer;
 
  }
И еще попутно маленький вопрос transition: opacity .5s,background-color .5s; я хотел сделать чтобы текст вызжал свреху вниз может что то не так сделал. Буду благодарен за любую помощь
0
Лучшие ответы (1)
QA
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
12.02.2020, 17:00
Ответы с готовыми решениями:

Расширение блока при наводке на него
https://www.airforce.com/ - второй блок, где разделы Как реализовать так же пять блоков, чтобы...

Делегировать наведение мыши на блоки
Здравствуйте, Кто подскажет простой прием, как делегировать наведение мыши на блоки? Сейчас у...

Справка при наводке
Форумчане, подскажите.Есть ли в панели управления такая вещь как всплывающая справка над обьектом...

Как убрать стандартную подсветку при наводке
Как убрать подсветку голубым при наводке мышки на кнопку? И еще , я поставил свой стиль с...

Меню с изменяющимися картинками при наводке курсора. html+css
У меня проблема с кодом. Что нужно: Меню страницы сверху, в котором имеются несколько картинок. При...

2
Freeze_Breeze
272 / 267 / 105
Регистрация: 12.01.2016
Сообщений: 1,570
12.02.2020, 17:30 2
AD86, на 8-ой строке src=" нужно добавить закрывающие кавычки "
HTML5
1
<div class="block__goods_item_product"><img class="block__goods_item_product_image" src="><p>
0
novichek_1905
411 / 295 / 130
Регистрация: 16.02.2018
Сообщений: 831
12.02.2020, 17:31 3
Лучший ответ Сообщение было отмечено AD86 как решение

Решение

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
.block__goods_item p {
  margin: 0;
}
 
.block__goods_item {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;
  margin-bottom: 280px;
}
 
.block__goods_item_product {
  width: 33.333%;
  position: relative;
}
 
.tr {
  background: url(../img/home-7.jpg);
}
 
.block__goods_item_product:after {
  content: " ";
  display: block;
  padding-top: 100%;
}
 
.block__goods_item_product_image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
 
.block__goods_item_product > div {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 30px;
  font-weight: 700;
  font-family: "Segoe UI";
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  transition: opacity 0.5s, background-color 0.5s;
}
 
.block__goods_item_product div > p {
  transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
  opacity: 0;
}
.block__goods_item_product div > p:first-child {
  transform: translateY(-50%);
}
.block__goods_item_product div > p:last-child {
  transform: translateY(50%);
}
 
.block__goods_item_product:hover div {
  opacity: 1;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.block__goods_item_product:hover div p {
  opacity: 1;
  transform: translate(0);
}
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<div class="block__goods_item">
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
 
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
  <div class="block__goods_item_product"><img class="block__goods_item_product_image" src="img">
    <div>
      <p>Text</p>
      <p>Text1</p>
    </div>
  </div>
 
</div>
2
12.02.2020, 17:31
Answers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
12.02.2020, 17:31

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

Разбить строку на блоки, а затем эти блоки на отдельные слова
...доброго времени суток, уважаемые форумчане! Возникла задача - разбить строку на блоки, а затем...

Затемнение
вот посмотрите ссылку http://www.mult.ru/projects/mas/mults/mult_33.html попробуйте открыть мультик...

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


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

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

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