在图像上覆盖带有颜色的文字

Question

现在，我将颜色叠​​加在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> 

怎么会悬停我还叠加文本？

我在这里发现了很多教程，但是我完全失去了如何修改当前代码以覆盖文本。

Answer 1

您必须定位文本div abosolute并将其显示在悬停上。

.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-通过CSS和HTML我做到了。它的工作。

这里是演示：

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