Social Icons - Flip Over Hover


1. Plugin Info

Add a flip over hover effect to header social icons and button.

  • Works with Squarespace 7.1

  • Uses Custom CSS

  • Compatible with Header Icons and Social Blocks


2 (a). Add this code to Custom CSS - For Header Social Icons

// FLIP OVER SOCIAL ICONS - HEADER - GHOST //

.header-actions .header-actions-action--social a {
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.header-actions .header-actions-action--social a:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

2 (b). Add this code to Custom CSS - For Social Block Icons

// FLIP OVER SOCIAL ICONS - SOCIAL BLOCK //

.socialaccountlinks-v2-block .sqs-svg-icon--social {
  transform: scaleX(1) !important;
  transition: all ease-in-out .5s !important;
}

.socialaccountlinks-v2-block .sqs-svg-icon--social:hover {
  transform: scaleX(-1) !important;
  transition: all ease-in-out .5s !important;
}

3. Customizable Options

  • Transition Speed


4. Plugin Notes

  • No plugin notes


Previous
Previous

Navigation - Upside Down Hover Style

Next
Next

Store Page - Sale Text Style