Как сделать затемнение блока div?

Question

[denism300]

Есть блок следующей конструкции:

<div class="col-xs-6 col-md-4>
<div>
<a>
<div class="col-md-12><img /></div>
<div class="col-md-6"><img /></div>
<div class="col-md-6"><p></p></div>
</a>
</div>
</div>

подскажите, как сделать при наведении мышью затемнение всего блока?

Answer 1

[Dymok]

Добавить блоку псевдоэдемент, растянуть на весь блок, задать нужный фон, при ховере на блок показывать его (при необходимости поменять z-index)
https://codepen.io/UnluckySerivelha/pen/VBKPzv

Answer 2

[Варлам Ерофеич]

Сделать при наведении фон родительского div-а чёрным с нужной прозрачностью, например:
.col-xs-6:hover {background: rgba(0,0,0,.2);}
Скорее всего вариант, который вам нужен - здесь

Comments

[denism300]

не работает. во-первых, бэкграунд не перекрывает картинки в других двух div, во-вторых, бэкграунд не перекрывает белый фон в div с текстом.

[Варлам Ерофеич]

denism300,
1. в примере не было (и нет) текста
2. в примере не было (и нет) картинок
3. вам никто не мешает нужные (подлежащие затемнению) классы перечислить через запятую в стилях...

.col-xs-6, col-md-4, col-md-6, col-md-12:hover {background: rgba(0,0,0,.2);}

Также можно родительский, затемняющий div приподнять над остальными потомками при помощи "z-index"-ов...
- И да, как пишет Dymok, т. е. включать псевдоэлемент при ховере - тоже можно.
А если к ховеру добавить ещё и opacity: .4;, то получится, как здесь

[denism300]

Варлам Ерофеич,
1. в примере есть теги p, логично, что между ними что-то есть
2. в примере есть теги img, логично, что там картинка.

[Варлам Ерофеич]

denism300,
- Ага... И уж тем более логично, что помощники сами и песочницу для автора вопроса откроют, и "пирожных напекут"...
Кроме того, теги <p></p> достаточно часто применяют пустыми. Откройте любую страницу MDN в редакторе и посчитайте на досуге их количество...
Есть и другие, более оправдывающие себя причины оставлять те или иные теги пустыми. Если интересно - обращайтесь, примеров много и я их приведу. Вот только заведомо, не глядя на сопутствующие скрипты подразумевать, что же несёт в себе пустой html-тег - нелогично...
Пример: <box><div class="box"></div></box> - Давайте же, посоревнуемся в логике... (ответ на этот пример будет позже)

[Варлам Ерофеич]

Обещал дать ответ - выполняю обещание:
html
<box><div class="box"></div></box>
css

box{ 
  width: auto; 
  margin: 0;
  padding: 1%; 
  background: #222; 
  border: 4px solid #929292;
  border-radius: 50%; 
  display: inline-block; 
  transform: rotate(-45deg); 
}
.box { 
    margin: .1rem;
    width: 13rem;
    height: 13rem;
    box-sizing: border-box;
    text-align: center; 
    vertical-align: top; 
  border: 5rem solid transparent; 
  border-image: radial-gradient(#bcc, #888 40%, 
        #e62 50%, #2cc 60%, #828 69%, transparent 70%) 15% fill; 
}

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

Answer 3

[Ольга Ветер]

Для начала удалите все эти конструкции и напишите валидно. И по бутстрапу документацию тоже посмотреть не будет лишним. Там такая штука есть .row и что-то про 12 колонок.

Comments

[hellcaster]

Если работает, трогать не стоит )

[denism300]

я в курсе про бутстрап. тут приведена упрощенная конструкция.