Как показать текст на изображении при падении?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как показать текст на изображении при падении?

Сообщение Anonymous »

Я пытаюсь показать описание при парясь над изображением. Я уже сделал это менее чем желательным способом, используя здесь спрайты изображений и зависание: я хочу, чтобы это выглядело точно так же, как он у меня есть, но используя настоящий текст вместо изображения. Я пытаюсь сделать это только с помощью HTML и CSS, но я не уверен, что это возможно. Class = "Snippet-Code">

Код: Выделить всё

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


[url=buzz.html]
[img]content/assets/thumbnails/transparent_150x150.png[/img]
[/url]

[url=slinkster.html]
[img]content/assets/thumbnails/transparent_150x150.png[/img]
[/url]




Подробнее здесь: https://stackoverflow.com/questions/142 ... n-hovering
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»