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

Question

The basics of what I'm trying to accomplish are thus: I have an image (a painting.) I have a smaller image on top of that one, in the top right corner (an "i" for "information.") I want to make it so when hovering over the "i", a text box appears, with 3 lines of text (information about the painting.)

Solution

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>

Comments

[alexwc_]

Please show us your current HTML/CSS in your question.

[divy3993]

@Ian Redford Post your code here please and also brief us what do you mean text box? Is it text field you talking about? Or Tool Tip

[divy3993]

Could you brief us more?

[ryanpcmcquen]

Have a look at my answer @ian-redford.