Comment puis-je créer un popup zone de texte lors du survol d'une image? (html, CSS)

Les bases de ce que je suis en train de l'accomplir sont donc:
J'ai une image (un tableau.)
J'ai une image plus petite sur le dessus de celui-ci, dans le coin en haut à droite (un "i" pour "information".)
Je veux faire en sorte quand le curseur est sur le "je", une zone de texte s'affiche, avec 3 lignes de texte (informations sur le tableau.)

  • Merci de nous montrer votre HTML/CSS dans votre question.
  • Redford Poster votre code ici s'il vous plaît et aussi nous donner des informations que voulez-vous dire de la zone de texte? Est-ce champ de texte que vous parlez? Ou Pointe de l'Outil
  • Pourriez-vous nous donner des informations plus?
  • Jetez un oeil à ma réponse @ian-redford.
InformationsquelleAutor Ian Redford | 2015-09-09
  1. 6

    Sans avoir le code, je pense que vous voulez faire quelque chose comme ceci:

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

    CSS:

    .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;
}

    HTML:

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

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

    InformationsquelleAutor ryanpcmcquen