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

完成 CSS和HTML 。它的工作。

这是Demo：

＆＃13;

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

＆＃13;

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

＆＃13;

在图像上叠加带有颜色的文本

2 个答案: