Footer icons fade but custom TikTok icon does not fade

Site URL: https://www.twenty4seventrends.com/london-personal-shopper

Hi, please could someone advise me on how to make the TikTok logo in the footer fade when other icons like Facebook, Instagram, Pinterest, Spotify, are selected besides it. 

Thank you very much!

-

Here is the code for the TikTok logo,

.sqs-svg-icon-- wrapper[href*=tiktok] 
.sqs-svg-icon--social { 
display: none; } 
.sqs-svg-icon--list:hover 
.sqs-svg-icon--wrapper[href*=tiktok] { 
background: #FFFFFF; } .sqs-svg-icon--wrapper[href*=tiktok] { 
background: #FFFFFF; } 
.sqs-svg-icon--wrapper[href*=tiktok]:hover{ 
background: #FFFFFF !important;; 
} 
.sqs-svg-icon--wrapper[href*=tiktok] > div { 
display: inline-block; 
background: url(https://static1.squarespace.com/static/5df682403e4f3755a0064ca9/t/624dfc919e023b4afd9f2cc2/1649278097668/t4st_tiktoklogo.png) no-repeat; background-size: cover; 
width: 41%; 
height: 51% ; 
top: 23%; 
left: 27%; 
transform: translate(-50%, -50%) }
 

----

nav.sqs-svg-icon--list:hover a {
    opacity: 0.5;
}

I have tried this code but the issue is that it overlaps the fade makes everything fade 

On 4/13/2022 at 10:29 PM, mattr1998 said:

Site URL: https://www.twenty4seventrends.com/london-personal-shopper

Hi, please could someone advise me on how to make the TikTok logo in the footer fade when other icons like Facebook, Instagram, Pinterest, Spotify, are selected besides it. 

Thank you very much!

-

Here is the code for the TikTok logo,

.sqs-svg-icon-- wrapper[href*=tiktok] 
.sqs-svg-icon--social { 
display: none; } 
.sqs-svg-icon--list:hover 
.sqs-svg-icon--wrapper[href*=tiktok] { 
background: #FFFFFF; } .sqs-svg-icon--wrapper[href*=tiktok] { 
background: #FFFFFF; } 
.sqs-svg-icon--wrapper[href*=tiktok]:hover{ 
background: #FFFFFF !important;; 
} 
.sqs-svg-icon--wrapper[href*=tiktok] > div { 
display: inline-block; 
background: url(https://static1.squarespace.com/static/5df682403e4f3755a0064ca9/t/624dfc919e023b4afd9f2cc2/1649278097668/t4st_tiktoklogo.png) no-repeat; background-size: cover; 
width: 41%; 
height: 51% ; 
top: 23%; 
left: 27%; 
transform: translate(-50%, -50%) }
 

----

nav.sqs-svg-icon--list:hover a {
    opacity: 0.5;
}

 

I have tried this code but the issue is that it overlaps the fade makes everything fade 

Try adding to Home > Design > Custom css

nav.sqs-svg-icon--list:hover a[href*='tiktok'] {
  opacity:0.4;
}

nav.sqs-svg-icon--list a[href*='tiktok']:hover {
  opacity: 1;
}

Let me know how it works on your site

Hovering instagram

Hovering TikTok

Thank you very much! 😃