CSS3: используйте событие на парении для установки полупрозрачного наложения на изображении
Мне нужно на полупрозрачном отделении при наведении курсора, которое заставляет некоторый текст появляться поверх изображения миниатюр? Действительно ли возможно сделать это, не используя JavaScript и с помощью просто Каскадную таблицу стилей?
2 ответа
Вы можете попробовать что-то вроде этого:
<style type="text/css">
.thumb {position:relative;width:200px;height:20px;}
.thumb:hover .overlay {opacity:0.5;}
.overlay {position:absolute;top:0;left:0;width:200px;height:20px;background:#fff;opacity:0;}
</style>
<div class="thumb">
<div class="overlay"></div>
<img src="image.gif" />
</div>
В зависимости от того, что вы делаете с миниатюрой, вы можете установить фон DIV в качестве изображения, включить текст и использовать CSS для переключения видимости с прозрачного на горит при наведении.
Это будет работать чисто только в том случае, если у вас есть миниатюра известного размера (потому что трудно автоматически изменить размер div под размер его фонового изображения), но это поможет найти простое решение в вашем html:
<div class="thumb" style="background-image: url(thumb.jpg);">
<p>mouseover text</p>
</div>
Важным css будет что-то вроде этого ...
div.thumb p { visibility: hidden; }
div.thumb:hover p { visibility: visible; }
Из вашего вопроса не уверен, должен ли быть прозрачный весь div или только текст, но вы можете применить соответствующий CSS на любом уровне.