Hover эффект у карточки

27 января 2022, 11:00

Правильно ли будет если я сделаю img как бэкграунд, а сами элементы, которые должны появляться при наведении, сделаю opacity: 0 (при наведении opacity будет равняться 1).

Answer 1

<div class='bgImage' >
    <!-- bgImage задаёшь картинку как бэкграунд -->
    <div class="someBlocks">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores, saepe.
        </p>
    </div>
    <!-- в класс someBlocks кладёшь всё что нужно отбразить при наведении -->
</div>

И обязательно стили

.bgImage{
  background-image: url('image.jpg');
}
.someBlocks{
  display: none;
}
/*По умолчанию someBlocks скрыт*/
.bgImage:hover .someBlocks{
  display: block;
}

Но при наведении должен отобразиться