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

---