Я пытаюсь показать описание при наведении на изображение. Я'мы уже сделали это не так, как хотелось бы, используя спрайты и парящие изображения:http://willryan.us/design.html Я хочу, чтобы это выглядело точно так же, как у меня, но с использованием реального текста вместо изображения.

Я пробовал несколько разных вещей, но я могуКажется, я не могу понять, как это сделать. Я'я пытаюсь сделать это, используя только HTML и CSS, но яя не уверен, что этовозможно.

Не стесняйтесь копаться в моем коде, яЯ вставлю то, что я считаю релевантным здесь.

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

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

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