Show Contents of a Section on Hover | Squarespace 7.1

What does this code do?

This code snippet will allow you to hide the contents of a section until the section is hovered over.

Note: To help your site stay mobile friendly, this code is set to only display on screens larger than 800px.

Code Snippets

Copy and paste this code into Design > Custom CSS

/* Show Section Contents on Hover */
@media only screen and (min-width: 800px) {
  #COLLECTIONID #page .page-section:nth-of-type(1) .content {
    opacity: 0;
    -webkit-transition: opacity 1s ease-in;
    -moz-transition: opacity 1s ease-in;
    -ms-transition: opacity 1s ease-in;
    -o-transition: opacity 1s ease-in;
    transition: opacity 1s ease-in;
  }

  #COLLECTIONID #page .page-section:nth-of-type(1):hover .content {
    opacity: 1 !important;
  }
}

Then change the 1 to match the section you are trying to change.

How To Use It

1. Copy and paste the code as indicated above.

2. To learn how to find a collection id check out our Start Here guide.

3. Change the 1 to match the section you are trying to change.