将鼠标悬停在图像上时,如何创建弹出文本框？(html,CSS)

Question

因此,我想要完成的基础是:我有一个图像(一幅画.)我在右上角有一个较小的图像,在右上角有一个"i"代表"信息".我当它悬停在"i"上时,会出现一个文本框,包含3行文字(有关绘画的信息).

Answer 1

没有任何代码,我想你想做这样的事情:

https://jsfiddle.net/ryanpcmcquen/n37bdvzq/

.hoverinfo {
  position: absolute;
  top: 15px;
  left: 15px;
  font-size: 28px;
  color: #ffffff;
  cursor: pointer;
}
.hoverinfo p {
  display: none;
  color: #000000;
}
.hoverinfo:hover p {
  background-color: rgba(255, 255, 255, 0.7);
  display: block;
}

<div>
  <img src="https://yogifil.la/200/200" />
  <div class="hoverinfo"> <span>i</span>

    <p>3
      <br>lines
      <br>of text</p>
  </div>
</div>