保持覆盖文本固定 [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>

这里是我网站的链接以及更多示例：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 行