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;

}