Muse Image rollover with text

[benjamin1602]

Hi,

I'm trying to make a composition in Muse where an image becomes another image (black and white to color) on mouse rollover. At the same time, a text should appear. I have a preview website: Nicolas Schuybroek | Projects  that had exactly what I'm looking for.

I tried this with a blank composition, but when I select another image in the 'rollover state', Muse keeps the original image instead of the image it should be showing on mouse rollover and so nothing happens.

Could anyone help me with this? Thanks!

Ben

[fotoroeder]

I could pass you to a recent thread from today: state-button

AND an older one here / I updated this one right now: Homepage

You can download both directly from the browser.

You need a state button out of the box.

You can show or not show elements when you use the opacity slider (watch the 100% for the TITLE).

I hope this helps

Best Regards,

Uwe

[benjamin1602]

Hi Uwe,

Thanks for your help. I think I'm getting it. So I should create a separate box for each state (and then place them over each other to have both images on the same place)? That seems to work!

Do you think there is a way to get a 'smooth' transition (fading) between the images? Now it just pops up without fading.

Thx!

Ben

[Pavel_Homeriki]

benjamin1602  написал(а)

Do you think there is a way to get a 'smooth' transition (fading) between the images? Now it just pops up without fading.

Thx!

Ben

With the standard tools of Muse it's impossible. Coding is required.

[fotoroeder]

state-button  ​

Nothing more easy than that.

No coding required.

How cool is that then?

Uwe

[Pavel_Homeriki]

We are talking about the transition between the different background images. Check it out in Firefox . It is impossible to do this without encoding. This works in Chrome, but not in Firefox.

[Pavel_Homeriki]

For the sake of justice, it should be noted that a smooth transition can be done with the images placed in the state button and their opacity settings.

[fotoroeder]

Yes. With normal transitions it works only with colors. It works with text that appears in transition as well but not with pictures.

But the opacity workaround is nice, too. Thanks for pointing this out.

[Pavel_Homeriki]

Unfortunately, the opacity workaround is not so nice, as it creates a lot of code. If there are many such objects on the page, this can lead to a poor page speed.

[fotoroeder]

Not so nice Thanks

Uwe

[benjamin1602]

Thanks, guys! This looks very nice!

Ben