Jump to content

Trouble Creating Hover Animations for Clickable Links

Recommended Posts

Site URL: https://www.jaxmariephotography.com

I am having a little trouble creating hover animations for the clickable links:

  1. I would like the hover animation for the header to look something like the 1st video attached below. There should be no underline animation for the links  drop down menu under "Portfolio."  ("Beverages," "Editorial," and "Desserts") because there is already a cell color inverter hover animation for these links. 
  2. I would like the "Beverages," "Editorial," and "Desserts" links in the banner on the homepage to lessen in opacity when they are hovered over (no underline animation here).
  3. For the footer, I would like each link to have an underline drawn under when the user hovers over (like the 2nd video attached).

All of these animations should only apply to the desktop view of the site and not on the phone or tablet.
I am a complete beginner when it comes to custom CSS so any help (with any of the animations) would be greatly appreciated! Thank you!


hover proposal.png

Link to comment
  • Replies 2
  • Views 204
  • Created
  • Last Reply
20 hours ago, tuanphan said:

Add to Design > Custom CSS

/* remove nav links underline */
div.header-nav-item a {
    background-image: none !important;


Thanks for the help but this isn't what I wanted to change. What I wanted to do was to create animations for the header and footer (as described above). Please reference the first post for more specifics.

Link to comment


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.