Jump to content

Graying out a custom social link icon on hover of any of the other icons?

Recommended Posts

We've added a custom social link icon in the footer of our website our website (Hyde template) using the following custom html in Home>Design>Custom CSS (huge thanks to @tuanphan) :

.Footer-middle .sqs-svg-icon--wrapper:first-child {
    visibility: hidden;
}
.Footer-middle .sqs-svg-icon--outer .sqs-svg-icon--wrapper:first-child:after {
    visibility: visible;
    content: "";
    background-image: url(https://image.flaticon.com/icons/svg/49/49625.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 30px;
    height: 30px;
    display: inline-block;
}

We would like to have the custom icon gray out when the user hovers the pointer over either one of the other two icons in the block. For instance, hovering over icon 1 (the new custom social link icon) causes icon 2 and icon 3 in the block to gray out, but when the user hovers over icon 2, icon 3 will gray out but icon 1 remains the same color. Similarly, hover on icon 3 results in icon 2 graying out, but icon 1 remains solid. Pictures of each scenario have been included for the sake of clarity. I've been informed that the solution is somewhat complex and requires using jquery…. Any info is helpful and appreciated.

1125054226_ScreenShot2019-11-26at9_52_53AM.png.c079650f1f78c6793d271e0a2115e84a.png

1476631496_ScreenShot2019-11-26at9_54_19AM.png.3603123677b35b87ccb2634ae691e421.png

260559754_ScreenShot2019-11-26at9_53_46AM.png.f7a508969678c1a705ca600d4f817971.png

Link to comment
  • 3 weeks later...
  • Replies 2
  • Created
  • Last Reply

Don't have an answer for this question. But for anyone trying to add custom social icons to the SquareSpace social icons block, I used @tuanphan's code with FontAwesome instead and am really happy with how it turned out. It's definitely not perfect (as mentioned in the above question), but will do until SquareSpace adds the additional icons we need such as Phone and Whatsapp. *Ahem* @SQUARESPACE

FYI I am using the XL Circle Knockout icons!

.sqs-svg-icon--wrapper.url {
    visibility: hidden;
}
.sqs-svg-icon--wrapper.url:after {
  visibility: visible !important;
  display: block !important;
  position: absolute !important;
  font-family: "Font Awesome 5 Pro"; /*for some reason writing "Font Awesome 5 Free" didn't work even though I have the free plan, this solved the problem for me*/
  font-weight: 900;
  font-size: 1.3em;
  color: #728291;
  content: "\f879"; /*This is the unicode number from whichever font awesome icon you select, make sure you leave in "\" before the number otherwise it won't work*/
  background: white;
  text-align: center;
  line-height: 48px; /*This number is VERY important in order to get it to align correctly in the circle, square or whatever size icons you have, I got the size from doing inspect on Google Chrome and looking at what size SquareSpace was using for knockout circle icons I am using*/
  width: 48px;
  overflow: hidden;
}

 

Link to comment

Update: I also did the same for the links in my header. And I realized I didn't need the "!important;" tags since this is a new element --can you guys tell I'm new at this?! Hopefully this will help someone somewhere. Also note that I needed to decrease the font size to match the corresponding icons since the social icons in my header are a lot smaller.

 

Alllso, for anyone wondering why I didn't just do font awesome icons in my secondary menu or tagline, I'm using a double header with a logo in the middle and navigation on either side. So this was pretty much the only option I could think of.

 

.SocialLinks-link.url  {
    visibility: hidden;
}

.SocialLinks-link.url:after {
  visibility: visible;
  display: block;
  position: absolute;
  font-family: "Font Awesome 5 Pro";
  font-weight: 900;
  font-size: 0.8em;
  color: #455b6d;
  content: "\f879";
  background: white;
  text-align: center;
  line-height: 28px;
  width: 28px;
  overflow: hidden;
}

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.