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

 

 

 

 

Edited by andrewmel
Link to comment
  • Replies 6
  • Created
  • Last Reply

Top Posters In This Topic

Add to Home > Design > Custom CSS

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

 

Edited by tuanphan

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

@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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.