CSS3: используйте событие при наведении, чтобы установить полупрозрачное наложение на изображение

Question

Мне нужен полупрозрачный div при наведении курсора, который приводит к появлению некоторого текста поверх эскиза изображения? Возможно ли сделать это без использования JavaScript и использования только каскадной таблицы стилей?

Answer 1

Вы можете попробовать что-то вроде этого:

<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>

Answer 2

Хорошо, хорошо, я знаю, что это старый, но я столкнулся и хочу кое-что добавить о настройках непрозрачности

Http: //deepubalan.com/blog/2010/03/29/rgba-vs-opacity-the-difference-explained/

Если посмотреть, я считаю, что использование rgba, когда это возможно, при непрозрачности обеспечивает гораздо лучший результат, непрозрачность может работать смешно в разных браузерах и вызывать всевозможные проблемы ... только мои 2 цента

Answer 3

В зависимости от того, что вы делаете с миниатюрой, вы можете установить фон 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 на любом уровне.