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?
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?
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?
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.
