How do I create a popup text box when hovering over an image? (html, CSS)

Question

因此，我要完成的工作的基础知识是：我有一幅图像（一幅画。）在该图像的顶部，右上角有一个较小的图像（“ i”表示“信息”。）要使其悬停在“ i”上时，将出现一个文本框，其中包含3行文本（有关绘画的信息）。

Answer 1

Without having any code, I think you want to do something like this:

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>