Streaming live at 10am (PST)

How to swap out hover image?

Hi there! I’m new to webflow, but have experience with HTML and CSS. I’m using the template Veritas (https://veritas-cms.webflow.io/), and I’m trying to replace the hover of the Instagram icon with an email icon. I’ve successfully replaced the initial icon with an email icon on my site (https://caytedesigns.webflow.io/), but can’t figure out how to replace the hover image. I’ve looked for help here, but haven’t had luck. Does anyone know how it’s working? Thanks!


Here is my public share link: LINK
(how to access public share link)

Hi Cayte, welcome to the forum!

Select the Social Icon and change your selector to “Hover” using the dropdown on the right:

grafik

Then you should be able to swap the .svg file from insta icon to anything else just as you did with the normal state.

Hope this helps!

1 Like

Amazing! That was so simple, haha. Thank you so much for your quick response, Chris!

Hi sorry, I have a follow-up question.

I’m trying to swap out the hover states on the other icons, but the LinkedIn one is not changing. I tried to reset the style as shown in the screenshot, but that doesn’t seem to do anything. Any ideas? Thanks again!


I can’t really tell by your screenshots.

Do you mind sharing your read-only link?

Here is how:

Sorry about that. This should be it: https://preview.webflow.com/preview/caytedesigns?utm_medium=preview_link&utm_source=designer&utm_content=caytedesigns&preview=a97f64701de269cc20ea0e30c5203123&mode=preview

Okay, that one is a little tricky.

Seems like you’ve got two combo classes called “Linkedin”/“LinkedIn” which are interfering with each other.

Here is how to solve it:

  1. Go to the Style Manager and search for these classes:

grafik

  1. Change the name of first “LinkedIn” class through the wrench (e.g. “LinkedIn0”).

  2. Go to Style tab, select your LinkedIn Social Icon and remove the renamed combo class (“LinkedIn0”).

  3. Add the “Linkedin” combo class to it.

  4. Styling the background image is now possible again. You might need to do a few style changes again, but it should work.

grafik Hover -> grafik

Ah yes, that was what it was! Thank you so much Chris. :slight_smile: