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