Próbuję pokazać opis, gdy najeżdżamy na obraz. Zrobiłem to już w mniej niż pożądany sposób, używając tutaj obrazków i ikonek:http://willryan.us/design.html Chcę, żeby wyglądał dokładnie tak, jak go mam, ale używał prawdziwego tekstu zamiast obrazu.

Wypróbowałem kilka różnych rzeczy, ale nie wiem, jak to zrobić. Próbuję to zrobić tylko za pomocą HTML i CSS, ale nie jestem pewien, czy to możliwe.

Zapraszam do zagłębienia się w moim kodzie, wkleję to, co myślę, że jest tu ponownie dostępne.

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>