Social Media Icons Hover Effect

Design help General
1

Hello,

I am trying to have social media icon links in the footer change color upon hover. I have uploaded the icons (one that is light grey, and one that is golden upon hover) under Background > Image & Gradient, but for some reason, the hover is not being activated. The footer can be viewed on any page except the Home page which is a video background splash page.

Any ideas of what may be causing this? I’m sure its a simple fix, but am missing a certain detail somewhere. Thanks.

Here is my public share link:

2

Hey,

Put the fb gold image on the link under the actual image then set the hover on the opacity of the image :slight_smile:

3

yes i know you have the same linkblock under each just give them each a different name, one for each of the social images you are putting inside, then make the bg image of each for each respectively.

4

Hi Edmund,

I put the fb gold image under grey image and it moves the icon right above it (screenshot attached):

Is there a way for both images to not overlap one over the other?

Also, in your 2nd response, I know you mentioned renaming the social images. Does my footer link structure need to be changed in any way? Thanks.

5

I was able to figure it out! Here are some of the steps to take when doing this:

  1. Place both images under a link block
  2. Grey icon set to position: absolute, overflow: hidden AND hover state set at opacity of 0%
  3. Gold hover icon set to position: auto, overflow: visible AND hover state set at opacity of 0%

The transition upon hover can be placed on the grey icon for a smooth hover effect (I used opacity 200 ms ease).

Heres a screenshot of how it’s structured. sm-row class is just a link block, Image 10 is the grey icon, Image 9 is the gold icon:

Thanks for leading me in the right direction! :slight_smile:

1 Like
6

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