保持叠加文本固定 [html]

Question

当您将鼠标光标移动到图形顶部时，我会出现一个覆盖文本。我想保持覆盖固定。也就是说，始终显示文本而不需要在图形上移动光标。

换句话说，而不是这个...

...我想像这样修复文本：

下面是我的代码：

<div class="col-md-6 col-sm-6 col-xs-6 fh5co-work-wrap">
<a href="http://people.tamu.edu/~nsthiago/Hollenbach_Silva_JOP_2018.pdf" target="_blank" class="fh5co-work-item js-fh5co-work-item">
<img src="images/jop_2018.png" alt="Image"  class="img-responsive">
<div class="fh5co-overlay-bg js-fh5co-overlay-bg"></div>
<div class="fh5co-overlay-text js-fh5co-overlay-text">
<h2> Fiscal Capacity and Inequality: Evidence from Brazilian Municipalities [JOP 2018] </h2>
<ul class="fh5co-categories">
<li>With Florian Hollenbach</li>
</ul>
</div>
</a>
</div>

这是我网站的 link，其中包含更多示例：http://people.tamu.edu/~nsthiago/

提前致谢！

Answer 1

文本及其白色背景设置为 opacity: 0，然后在悬停时使用 javascript 进行更改。只需打开 CSS 文件，并将不透明度更改为 1。就在这里：

.fh5co-overlay-text,
.fh5co-overlay-bg {
    position: absolute;
    opacity: 0; // change this to 1
}

style.scss

的第 347 - 351 行

保持叠加文本固定 [html]

Keeping the overlay text fixed [html]

html

text

overlay

figure