Как показать элемент при наведении

Короткий ответ

Спрячьте элемент и показывайте его, когда курсор над родителем:

<style>
  .card { position: relative; width: 200px; }
  .card img { display: block; width: 100%; border-radius: 8px; }
  .card .actions { position: absolute; inset: auto 8px 8px; display: none; }
  .card:hover .actions { display: block; }
</style>
 
<div class="card">
  <img src="/media/photo-400x250.jpg" alt="A flower">
  <div class="actions"><button>♥ Like</button></div>
</div>

Плавное появление

display не анимируется, поэтому для плавности используют opacity и transition:

<style>
  .tip { opacity: 0; transition: opacity 0.3s; }
  .item:hover .tip, .item:focus-within .tip { opacity: 1; }
</style>
 
<div class="item">
  <button>Hover or Tab here</button>
  <span class="tip">Saved to favorites</span>
</div>

:focus-within показывает подсказку и при переходе клавишей Tab — без него пользователь клавиатуры её никогда не увидит.

Сенсорные экраны

На телефоне наведения нет. Скрывайте при наведении только второстепенное, а для устройств без мыши показывайте всё сразу через медиазапрос @media (hover: none).

Частая ошибка

Кнопки внутри карточки показывают только по :hover. Пользователь клавиатуры переходит на невидимую кнопку и не понимает, где он, а на телефоне до неё не добраться вовсе. Добавляйте к :hover правило :focus-within и подумайте, нужен ли эффект на сенсорных экранах.