Link Grows on Hover

What does this code do?

This code snippet will allow you to add a growing animation to links when the visitor hovers overtop.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Links Site Wide */ 
a {
  display: inline-block;
-webkit-transition: transform ease 0.8s;
  transition: transform ease 0.8s;
}

a:hover {
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
}

/* Specific Links */ 
SELECTOR {
  display: inline-block;
-webkit-transition: transform ease 0.8s;
  transition: transform ease 0.8s;
} 

SELECTOR :hover{
  -webkit-transform: scale(1.1) !important;
  transform: scale(1.1) !important;
}

Then change the word SELECTOR to one of the selectors below.

Squarespace 7.0

/* One Page */
#COLLECTIONID a

/* Site Title */
.Header-branding

/* Header Navigation */
.Header-nav-inner a

/* The Footer */
footer a

/* One Section */
#PAGEID a

/* One Text Block */
#BLOCKID a

Squarespace 7.1

/* One Page */
#COLLECTIONID a

/* Site Title */
.header-title-text

/* Header Navigation */
.header-nav-item

/* The Whole Footer */
#footer-sections a

/* One Section */
#COLLECTIONID #page .page-section:nth-of-type(1) a

/* One Text Block */
#BLOCKID a

Tip: If you are trying to target a link within a block of text, you may have to change the “ a “ to a “ p “ or heading in order for the scale to work.

For example, if you created a Footer Navigation by linking pages to text, you may have to use

“#footer-sections p” in order for the links to be affected.

How To Use It

1. Copy and paste the code as indicated above.

2. Choose the selector that matches your situation.

3. To learn how to find a collection id, page id, or block id check out our Start Here guide.

4. If targeting one section in Squarespace 7.1, change the 1 to match the section you are trying to change.

5. Change the animation duration and the scale to match the size and speed you want.