Я пытаюсь показать описание при наведении на изображение. Я уже делал это менее чем желательно, используя спрайты изображений и зависающие здесь: http://willryan.us/design.html Я хочу, чтобы он выглядел точно так же, как у меня есть, но используя реальный текст вместо изображения.
Я пробовал несколько разных вещей, но я не могу понять, как это сделать. Я пытаюсь сделать это, используя только HTML и CSS, но я не уверен, что это возможно.
Не стесняйтесь копаться в моем коде, я приложу то, что, по моему мнению, будет relavent здесь.
HTML
<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>
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;
}