CODEWITHSUNDEEP
htmlcsstextboxpopuphover
Ian Redford
Ian Redford

Reputation: 79

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

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.)

Upvotes: 3

Views: 29686

Answers (1)

ryanpcmcquen
ryanpcmcquen

Reputation: 6455

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>

Upvotes: 7

Related Questions