时间戳

首页 > 解决方案 > 保持覆盖文本固定 [html]

html - 保持覆盖文本固定 [html]

问题描述

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

换句话说，而不是这个...... 现在的样子。

...我希望将文本固定如下： 我想要的方式。

下面是我的代码：

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

提前致谢！

标签： htmltextoverlayfigure

解决方案

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

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

style.scss 的第 347 - 351 行

推荐阅读