Jump to content

How to show text on Hover

Recommended Posts

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

 

 

 

 

Link to comment
  • Replies 6
  • Views 1.7k
  • Created
  • Last Reply

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

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.