как добавить картинку внутри текста при наведении hover

Рейтинг: 0Ответов: 2Опубликовано: 26.01.2023

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

css html hover
Источник: Stack Overflow на русском

Ответы

▲ 1

    .foo:hover .hidden-img{
      display: inline-block;
    }
    
    .hidden-img{
      display: none;
    }
     <div class='foo'>
        <p>Текст</p>
        <img class="hidden-img" src="https://i.pinimg.com/736x/b9/59/f1/b959f1670d2631589643575de5a782b7.jpg" alt="Тест">
      </div>

Помещаем картинку и текст внутрь обёртки и на неё вешаем hover P.S. Изначально теги div и p - блочные и занимают всю ширину. Поэтому по наведении на строку, где они содержатся, hover будет срабатывать. Если это не нужно - .foo и p нужно сделать display: inline-block

▲ 0

А я бы сделал так:

.img-onhover img {
  display: none;
}

.img-onhover .img-onhover-text {
  display: inline-block;
}

.img-onhover .img-onhover-text:hover + img {
  display: block;
}
<div class="img-onhover">
  <p class="img-onhover-text">Hover on Me!</p>
  <img src="https://i.sstatic.net/cmRDh.png">
</div>