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?
Here is my public share link: https://preview.webflow.com/preview/tempus-7b110f?preview=524cf90398d61dc07d0c6659e799a257
(how to access public share link)
Your public share link doesn’t work.
Can you please take a look ?
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?
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
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
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
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?
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
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:
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.