How to show text on Hover

Site URL: https://tuna-coral-j88a.squarespace.com/config/pages

Hi, wondering if anyone can help with this ?

We are building a new site, and would like to make a text block show only on hover. The text block is sitting over a full bleed background image.   

https://tuna-coral-j88a.squarespace.com

Im not experienced with CSS, have managed to do this within image poster and image card blocks, but have hit a wall with this. 

Any help with this would be hugely appreciated. 

Andrew

I found the following. It seems to relate to hover over an info icon, which is not exactly what im after. 

past into code block

<div id="hover-div"> 
<i class= "fas fa-info-circle"></i>  
   <span id="hover-element">
The Sisters
</span>

</div>

past into design/custom css

#hover-element {
  display: none;
  position: absolute;
  padding : 10px:
}

#hover-div:hover #hover-element {
  display :block
}

#hover-div {
  display: inline
}

@media only screen and  (max-width: 660px) {
  #block-
  yui_3_17_2_1_1589316549741_13070{ display: none
  }
}
 

It seems you solved?

I feel I'm close but, for some reason this isn't working for me

Add to Home > Design > Custom CSS

.homepage #page section p {
    visibility: hidden;
}
.homepage #page section:hover p {
    visibility: visible;
}

many thanks again @tuanphan ! appreciated 

@tuanphan  should i add this after the following  ?  in in between ?

#hover-element {
  display: none;
  position: absolute;
  padding : 10px:
}

#hover-div:hover #hover-element {
  display :block
}

#hover-div {
  display: inline
}

@media only screen and  (max-width: 660px) {
  #block-
  yui_3_17_2_1_1589316549741_13070{ display: none
  }
}

Yes, after your code