html5悬停显示文字,html – 如何在悬停时在图像上显示文字？

我想在图片上方悬停时显示说明。我已经做了一个不太理想的方式，使用图像精灵和悬停在这里：

http://willryan.us/design.html我想让它看起来完全像我一样，但使用真实的文本，而不是一个图像。

我尝试了几个不同的东西，但我似乎不知道如何做到。我试图做只使用HTML和CSS，但我不知道如果这是可能的。

随意在我的代码，我会粘贴我认为是重要的这里。

HTML

CSS

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;

}