Search code examples
htmltextoverlayfigure

Keeping the overlay text fixed [html]

I have an overlay text that appears when you move the mouse cursor on top of a figure. I would like to keep the overlay fixed. That is, always showing the text without the need of moving the cursor on the figure.

In other words, instead of this... The way it is right now.

...I would like to have the text fixed like this: The way I would like to have it.

Below is the code I have:

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

Here is the link to my website with more examples: http://people.tamu.edu/~nsthiago/

Thanks in advance!

Solution

  • The text and it's white background are set to opacity: 0 and then changed on hover with javascript. Just open the CSS files, and change opacity to 1. Right here: 

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

    Line 347 - 351 of style.scss