Ich versuche, eine Beschreibung anzuzeigen, wenn ich den Mauszeiger über ein Bild halte. Ich habe es bereits auf eine weniger als wünschenswerte Weise getan, indem ich hier Bildsprites und Schwebeflüge verwendet habe:http://willryan.us/design.html Ich möchte, dass es genau so aussieht, wie ich es habe, aber echten Text anstelle eines Bildes verwendet.

Ich habe ein paar verschiedene Dinge ausprobiert, aber ich kann nicht herausfinden, wie es geht. Ich versuche es nur mit HTML und CSS, bin mir aber nicht sicher, ob das möglich ist.

Fühlen Sie sich frei, in meinem Code zu stöbern, ich werde hier einfügen, was ich für relavent halte.

HTML

div#projectlist {
  width: 770px;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 40px;
}

div#buzzbutton {
  display: block;
  float: left;
  margin: 2px;
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
}

div#buzzbutton:hover {
  background: url(content/assets/thumbnails/design/buzz_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

div#slinksterbutton {
  display: block;
  float: left;
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg) 0 0px no-repeat;
  width: 150px;
  height: 150px;
  margin: 2px;
}

div#slinksterbutton:hover {
  background: url(content/assets/thumbnails/design/slinkster_sprite.jpg);
  width: 150px;
  height: 150px;
  background-position: 0 -150px;
}

<div id="projectlist">
  <div id="buzzbutton">
    <a href="buzz.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>

  <div id="slinksterbutton">
    <a href="slinkster.html" title=""><img src="content/assets/thumbnails/transparent_150x150.png" alt="" /></a>
  </div>
</div>