Change Transparency of Section Background Image on Hover

Show the full color of a background section’s image by adjusting the transparency of the overlay color when you hover over it.

 
 

Usage

Paste the code into your Design » Custom CSS area. Replace [data-section-id] with the section id for the specific section that you want to add this effect too.

Optional: Use the Squarespace ID Finder Chrome Extension Tool if you don’t already use it.

 
  
/*Change Section Background Overlay Opacity on Hover*/
section[data-section-id]{
  
  /*Default State*/
  .section-background-overlay{
    transition: opacity .3s ease;
  }
  
  /*Hover State*/
  &:hover .section-background-overlay{
    opacity: 0 !important;
  }
}
  
Will Myers

I support web designers and developers in Squarespace by providing resources to improve their skills. 

https://www.will-myers.com
Previous
Previous

Add a “Register” Button to Event Details

Next
Next

Flip an Image on Hover