使用HTML和CSS实现索引弹出

Question

我对我的网站有一个想法，包括制作如下内容： 基本上，我想在图像上弹出一个小窗口，其中将包含一些文本内容。

我已经有了其他所有HTML / CSS明智的方法。我目前有（使用引导程序）一行和2列，带有图像的列只是具有背景图像的div，而另一个col只是弹性盒上的一些文本。如何使用引导程序或其他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>