Как увеличить и затемнить картинку в card при наведении?

Question

[evomed]

Есть видоизменненная карточка bootstrap с картинкой
https://jsfiddle.net/q89zg0vm/
Нужен эффект ivi https://www.ivi.tv
При наведении мышки на карточку с фильмом, карточка становится выше, изображение слегка заумируется и затемняется

Как к это сделать?

Answer 1

[Ankhena]

Затемнение: псевдоэлемент с rgba(0,0,0,0.5) или сколько вам нужно.
Увеличение: transform: scale(1.2) или сколько вам нужно.

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

Comments

[evomed]

transform: scale(1.2); увеличивает картинку во все стороны. Из-за этого перекрывается текст снизу. На иви тоже текст под карточкой, но т.к. увеличение идет вверх, то текст не перекрывается.

Также в моем примере, в верхнем углу на карточке появляется иконка при наведении мыши (скрыта стилем hidden). Так вот если мышкой навести на иконку то эффект transform: scale пропадает.

Что касается затемнения.
Сделал

.card-img:hover {
  background-color: rgba(0,0,0,0.5);
}

Без изменений
https://jsfiddle.net/AlexMirand/aku3qorx/

[Ankhena]

evomed, сдвигайте наверх установив точку относительно которой будет трансформация через transform-origin. Или меняйте высоту родителя и overflow или object-fit.

Также в моем примере, в верхнем углу на карточке появляется иконка при наведении мыши (скрыта стилем hidden). Так вот если мышкой навести на иконку то эффект transform: scale пропадает.

Естественно, у вас ссылка не внутри блока на который повешено наведение. Будет внутри, не будет пропадать.

Что касается затемнения.
Сделал

У меня было слово псевдоэлемент.

[evomed]

Будет внутри, не будет пропадать.

Если будет внутри тогда вообще не появится

[Ankhena]

evomed,

Если будет внутри тогда вообще не появится

С чего бы это и куда оно денется? ))
https://jsfiddle.net/pzvj37s9/

[evomed]

Ankhena, с этим разобрался, спасибо. А какой псевдоэлемент сделать, чтобы картинку затемнить в моем примере? Нагуглил список, но непонятно как это использовать и зачем)

[Ankhena]

evomed, я имела в виду ::before или ::after
Затем, чтобы наложить его поверх картинки.

Answer 2

[an_tropa]

.card-img:before:hover {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
}
.card-img:hover {
transform: translateY(10px);
}