Достижение всплывающих окон над индексом с помощью HTML и CSS

Question

У меня есть идея для моего веб-сайта, которая состоит в том, чтобы сделать что-то вроде этого: В основном я хочу, чтобы это маленькое всплывающее окно над изображением, которое содержало бы некоторый текстовый контент.

У меня уже есть все остальное, что нужно для работы с HTML / CSS.В настоящее время у меня есть (с помощью начальной загрузки) строка и 2 столбца, столбец с изображением - это просто div с background-image, а другой столбец - это просто текст на flex-box.Как мне добиться того, чего я хочу, используя начальную загрузку или некоторые другие функции CSS?

Answer 1

Просто пример, может быть полезно для вас.

.parent {
  position: relative;
}

.content {
  position: absolute;
  top: 0;
  left: 30%;
  background-color: white;
  padding: 0 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

<div class="parent">
  <img src="https://images.pexels.com/photos/67636/rose-blue-flower-rose-blooms-67636.jpeg" width="100%">
  <div class="content">
    <h3>Foobar</h3>
    <h5>More Beer, more party</h5>
  </div>
</div>