Custom Social Icon Hover State

Hi there,

I want to use custom icons in the footer of my page, have them link to my social media pages, and have the icon change color and slightly increase in size when hovering over it.

I have tried the following things however none have worked:

  1. Uploaded icons as background image of Link Block. Changed the hover state of the link block to have a different background image so I get the color-change/scale effect that I want. When I preview, the icons aren’t visible. I read in a forum that you have to set a height to the link block, which I did, but they still aren’t appearing when I do that (I entered in a height of 75px).

  2. I inserted an image element into my link blocks and uploaded my image to the image element. I don’t see an option to change the hover state of an image element. I also tried uploading my icon as the background image of the image block, but nothing shows up when I set the background image of an image element.

  3. I tried changing the background image of the div blocks (and changing the hover image), then adding link blocks into them. That didn’t work either.

It seems there should be a simple way to do this but I can’t seem to figure it out.

Any help is much appreciated!
Hollis

2 Likes

Hi @hollis

Can you please update your post with some more information so we can help you faster? Things like screenshots and your environment info really speed things up.

Posting guidelines can be found here: Posting Guidelines for the Design Help Category - General - Forum | Webflow

Thanks in advance! :slight_smile:

Hello @PixelGeek!

Link to site: https://preview.webflow.com/preview/atdemo1?preview=c7f16c73f5ea258baeb462b2a5db2440. I’m using Chrome 44.

The way the site currently is, I have the icons set up like scenario 3 above. Not sure if screenshots would help as it’s the link/hover that I’m having trouble with, but if there’s something specific you want to see let me know.

Thank you!

Hollis

seems to be working for me. can you show me a screenshot of what you’re seeing?

The hover effect works but I want the icon to link to something and it’s not. It’s just an arrow. It doesn’t link in preview or in the published view.

When I publish, the old social widgets I had in there show up - not the new icons I just added.

ah i see now. Give your icon link blocks a width and height as well :smile:

hope this helps :smile:

That worked! Thank you so much :slight_smile:

1 Like

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