Jump to content

Is there a code for hover to reveal text for an entire section?

Go to solution Solved by Lesum,

Recommended Posts

I currently have a code to hover to reveal text for one image, but I need this done for an entire section since I have a lot of images I need to reveal text for. Is there a code for hover to reveal text for an entire section?

This the code I have for one of the images: 

@media only screen and (min-width: 640px){
#block-782604b4ac35750175d7 {
opacity: 0;
 transition: opacity 1s
}

#block-782604b4ac35750175d7:hover {
opacity: 1;
transition: opacity 1s
}
}

 

 

Link to comment
  • Replies 2
  • Views 130
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

  • Solution

@app4qp Add this code under Custom CSS. You just have to replace the section-ID in the code for each sections.

@media only screen and (min-width: 640px){
	section[data-section-id="65f4b17f8e6efc273e96335b"] {
		.fe-block:has(p) {
			opacity: 0;
			transition: opacity 1s;
		}
		.fe-block:has(p):hover {
			opacity: 1;
		}
	}
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer

 Did you find my contribution helpful? Buy me a coffee?

Link to comment

Thank you! That worked! Just to confirm- is there a way to have sliding animations for the website if I have hover to reveal text? Also, hover to reveal text does not work on mobile correct?

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.