Social Media Links Hover Animation

Hi there,

I want to put links to my company social media pages on the navbar, and have them change colour with an opacity transition once hovered over. I have inserted link blocks inside div blocks for each social media icon, set both a background, one with grey and one with white. From this point I just can’t seem to get the colour to transition. Any ideas?

Many thanks


Here is my public share link: https://preview.webflow.com/preview/tempus-7b110f?preview=524cf90398d61dc07d0c6659e799a257
(how to access public share link)

Hello @Forbes,

Your public share link doesn’t work.
Can you please take a look ?

Hi zbrah,

All sorted! Could you take a look and possibly help? I’ve searched far and wide for tutorials/forum posts for something that seems to be such a necessity to most websites but nothing on the matter? :confused:

Hey @Forbes

A good way to do that

Create a png with both color of your icon

Then on webflow do this on state none

And this on hover state

You can take a look at what i’ve done here

https://preview.webflow.com/preview/forum-fb483f?preview=ee3fc19efe30c6eb592776c5d9ce8c4a

Will need to play with adjust to place it perfectly

The issue of this method is that you can’t play with transition in the change color of the icon since it’s just the same png moving.

You can still play with background position but it’s something else :wink:

The other method is create a relative div with width and height fixed
Put inside two div set in absolute 100% W and H with your icon in background (on with the color, one with grey)
Then just play with interaction to do what ever you want to do :slight_smile:

Hi zbrah,

Thanks for you help but unfortunately the second option is what I’m trying to do. It’s the fact the transitions don’t work. If you check my public link and click on the instagram logo, you’ll notice I have an opacity transition on that should fade the grey logo into a white one at 500ms. But unfortunately it just doesn’t work. Any ideas?

Kind regards

Hey @Forbes

Ok if you just want grey to white this is how you could do it

Put back your grey icon on hover state

Add filter brightness on this background hover state

This effet will make your icon white on hover.

Then go to state none and add a new transition on filter

This way it works

Let me know if it solved your issue

Hello @Forbes

Here’s another approach that you can try, I used a custom font called Ionicons (ionicons.com) and applied color to the typography on States None and Hover.

If you go to page > Social Media Icons you can see how I built it:
https://preview.webflow.com/preview/testingplayground?preview=eaf772107fb9b54c77952adb2d2647e2

Cheers,

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.