Как сверстать такой hover effect?

Question

[Сергей Соболь]

Подскажите, как сделать так, чтобы при наведении на картинку у нее появлялся снизу желтоватый фон + доп. текст, а заголовок карточки оставался прежним?

Comments

[FeST1VaL]

ну по факту легко. по умолчанию цвет и рамка белая с текстом размеров скрыты, при наведении на блок т.е на родителя ищите чайлд по ховеру и показываете их... ничего по сути сложного тут нету

[Ankhena]

Написать заголовок, написать текст.
Текст скрыть.
При наведении менять фон и показывать текст.

Если ховер на картинку, то соседние селекторы. Но разумнее на всю карточку и контекстные.

Answer 1

[trofimovfedor]

.style:hover {
# стили при наведении
}

Отображение текста - JavaScript

Comments

[Aetae]

Зачем js для текста? Чем display\opacity по hover'у плох?

[trofimovfedor]

Aetae, это даже лучше.

Answer 2

[Александр Лелека]

Верстаешь структуру как при ховере, со следующими дополнениями
1. Для блока background: none,
При ховере background: yellow
2. Текст делаешь прозрачным opacity: 0
При ховере opacity: 1

Comments

[Александр Лелека]

<div class="block">
<img>
<div class="name">Панели</div>
<div class="text">15-20см</div>
</div>

.block{
background: 0
}
.block:hover{
background: yellow
}
.text{
opacity: 0
}
.block:hover .text{
opacity: 1
}