在图像上用颜色覆盖文本

Question

Right now I am overlaying color over an image inside a div.

CSS:

.thumb {width:300px;margin:auto;background:rgba(231, 207, 0, 0.5);}
.thumb img { display: block; }
.thumb:hover img { opacity: 0.5; }

HTML:

<div class="thumb">
<a href="url">
<img src="source"/>
</a>
</div>

How could I also overlay text on hover?

I found quite a few tutorials on this but am completely lost how to modify the current code to have text overlay as well.

Answer 1

You have to position text div abosolute and display it on hover.

 .thumb { width: 300px; margin: auto; background: rgba(231, 207, 0, 0.5); position: relative; } .thumb img { display: block; width: 300px; } .thumb:hover img { opacity: 0.5; } .overlay_text { display: none; position: absolute; bottom: 0; text-align: center; width: 100%; } .thumb:hover .overlay_text { display: block; } 

 <div class="thumb"> <a href="url"> <img src="https://www.gravatar.com/avatar/4ee102e4ae1b9ab69077f7c471365f69?s=128&d=identicon&r=PG&f=1" /> </a> <div class="overlay_text">test</div> </div> 

Answer 2

Go-through the CSS and HTML i did. Its working.

Here is Demo:

 .thumb { background: rgba(231, 207, 0, 0.5); display: table; margin: auto; width: 300px; } .thumb img { display: block; margin: 0; position: absolute; top: 7px; } .thumb:hover img { opacity: 0.5; } .caption { display: table-cell; height: 300px; margin: 0; opacity: 0; text-align: center; vertical-align: middle; width: 300px; } .thumb:hover .caption{ opacity:1;} 

 <div class="thumb"> <a href="url"> <p class="caption"> CAPTION</p> <img src="http://placehold.it/300"/> </a> </div>