Social Icon Hover

Design help Animations & Interactions
1

Hi, I am trying to create an animation where when you hover over the social icon, it changes to the full color icon. It isn’t very smooth though and the white logo seems like it is showing underneath.

Can anyone help guide me on what I am doing wrong here? Read only link.

Here is my public share link: Webflow - Cabellow
(how to access public share link)

2

Hi @zafremedia – Any insight?

3

Hey Ashley,

Try this:

  1. Create an Embed
  2. Paste this code inside or the svg code of any other svg icon:
<svg width="100%" height="100%" viewBox="0 0 14 14" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_85_557)">
<path d="M3.25874 4.50391H0.448219C0.323483 4.50391 0.222412 4.60502 0.222412 4.72971V13.7587C0.222412 13.8835 0.323483 13.9845 0.448219 13.9845H3.25874C3.38348 13.9845 3.48455 13.8835 3.48455 13.7587V4.72971C3.48455 4.60502 3.38348 4.50391 3.25874 4.50391Z" fill="currentColor"></path>
<path d="M1.85459 0.015625C0.831961 0.015625 0 0.846683 0 1.86819C0 2.89014 0.831961 3.72152 1.85459 3.72152C2.87641 3.72152 3.7077 2.8901 3.7077 1.86819C3.70774 0.846683 2.87641 0.015625 1.85459 0.015625Z" fill="currentColor"></path>
<path d="M10.4077 4.2793C9.27891 4.2793 8.44447 4.76455 7.93835 5.31593V4.72951C7.93835 4.60482 7.83728 4.5037 7.71254 4.5037H5.02097C4.89624 4.5037 4.79517 4.60482 4.79517 4.72951V13.7585C4.79517 13.8833 4.89624 13.9843 5.02097 13.9843H7.82535C7.95009 13.9843 8.05116 13.8833 8.05116 13.7585V9.29125C8.05116 7.78589 8.46005 7.19943 9.50942 7.19943C10.6523 7.19943 10.7431 8.13959 10.7431 9.3687V13.7586C10.7431 13.8833 10.8442 13.9844 10.9689 13.9844H13.7743C13.8991 13.9844 14.0001 13.8833 14.0001 13.7586V8.80599C14.0001 6.56757 13.5733 4.2793 10.4077 4.2793Z" fill="currentColor"></path>
</g>
<defs>
<clipPath id="clip0_85_557">
<rect width="14" height="14" fill="currentColor"></rect>
</clipPath>
</defs>
</svg>
  1. change the font color of the object depending on your likings.

fill="currentColor" makes it so it inherits the font color of the parent. This can also be animated to another one for example.

In this post i’m going deeper into it visually: