Change Icon/Logo in Hover state

Hey team!

I’m working on a client site where the name of the company is “Raise Your Voice Media” but we want the initial state to be “RYV” (see below)

So I want the hover state to change from RYV to Raise Your Voice Media (or some sort of an icon when one is made).

Any thoughts on this?


Here is my public share link: https://raise-your-voice.webflow.io/
(how to access public share link)

Hi @Joshfifelski,

Welcome to the Webflow community, it’s the right place to get the support you need.

What you want to achieve can be done using interactions.

Basically you will create a wrapper (Brand Link) with 2 logo images inside of it.
Set the wrapper to ‘Relative’
Create a combo class for your 2nd logo
Set both logo images to ‘Absolute’ - full
Set the 2nd logo (combo class) of display: none

In the interactions:
Create a ‘Hover In’ interaction that will hide the 1st logo and show the 2nd
Create a Hover Out’ interaction to do the opposite.

Let me know how you get on if not sure.
Keiran

1 Like

Hey there!

Thanks for it! I’m still working on it, but I’m not getting it quite yet. I’ll keep messing around and see if I can get anywhere with it soon!

1 Like

You can check it out here:

5 Likes

Thank you so much!! This was very helpful I will be working on this today!

Thank you so much :slight_smile: you save my day

1 Like

Super helpful! The video was a great way to explain something contextually. :+1:t2:

1 Like