Jump to content

Create reveal effect for menu items when hovering using CSS

Recommended Posts

Site URL: https://ray-gecko-tfeg.squarespace.com/

Hi there, wondering if someone can help because this is driving me mad. 

I am trying to create a hover to reveal effect in my header navigation. See an example attached of what I'm trying to achieve. 

 

676105719_Screenshot2022-04-29at09_38_33.thumb.png.a23263cfeae6d57097e91b3c7752d8da.png1527873626_Screenshot2022-04-29at09_38_30.thumb.png.b16502ac8d1503711ebcb0856ffc773f.png

 

I was able to achieve this effect for regular text by inserting the following into a code block: 

<div id="hover-div">
  A<span id="hover-element">bout</span>
</div>

<div id="hover-div">
  C<span id="hover-element">ontact</span>
</div>

<div id="hover-div">
  S<span id="hover-element">ervices</span>
</div>

and then adding the following to the CSS editor: 

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

#hover-div:hover #hover-element {
  display: inline !important;
}

This had the following effect on my actual page: 

image.thumb.png.4effe54b7b46618068a9497c092a7f74.png

 

I am wanting to do this effect with each menu item in the navigation header but can't seem to figure out the code to achieve this. Does anyone have any suggestions or code to achieve this? 

image.thumb.png.d8c672ae1bb945cb6fb8606fb3e1c274.png

Test website is https://ray-gecko-tfeg.squarespace.com/ and the password is test1234 

 

Thanks in advance!

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

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hey there! Sure, sorry for the confusion. 

See attached a screen recording showing what I'm trying to achieve in the header.

 

The site I am referencing is https://www.eyrc.com/

You can see on the site I'm building here https://ray-gecko-tfeg.squarespace.com/ (Password TEST1234). 

 

I was able to achieve this using a regular text block here: 

image.thumb.png.599c900db3a7ba1dd086378e8c3865d7.png

I just don't know how to achieve this in the header. Does that make more sense? 

 

Thanks!

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.