Jump to content

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

By app4qp, in Customize with code

Go to solution Solved by Lesum,

Recommended Posts

app4qp Level 4

app4qp

Posted
Posted

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 854
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

  • Solution
Lesum Level 9

Lesum

Posted
  • Solution
Posted

@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
app4qp Level 4

app4qp

Posted
  • Author
Posted

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources