Поведение блока при hover, как исправить?

Question

[sergey]

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

PS: yellow-блок будет в дальнейшем изображением

jsfiddle

Answer 1

[Sn0wSky]

Что надо-то, желтую часть тоже красным залить?

Comments

[sergey]

да, нужно что бы ховер покрывал весь user__block-1

[Sn0wSky]

.user__block-1:hover {
background-color: rgba(226, 67, 62, .7);
.user__pic{
background-color: rgba(226, 67, 62, .7);
}
}
Если просто цветом залить

А если будет картинка, а уже поверх неё надо прозрачный красный делать, то лучше всего добавить какой-нибудь :before, :after, или доп блок
https://jsfiddle.net/sd6kg2k4/1/

Answer 2

[Bastax13]

Вместо

.user__block-1:hover {
  background-color: rgba(226, 67, 62, .7);
}

Вот это

.user__block-1:hover .user__pic, .user__block-1:hover {
  background-color: rgba(226, 67, 62, .7);
}