Highlighted

Muse Image rollover with text

New Here ,
Jul 28, 2017

Copy link to clipboard

Copied

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

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Muse Image rollover with text

New Here ,
Jul 28, 2017

Copy link to clipboard

Copied

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

Views

1.6K

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Jul 28, 2017 0
Adobe Community Professional ,
Jul 28, 2017

Copy link to clipboard

Copied

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).

Bildschirmfoto 2017-07-28 um 11.38.22.png

I hope this helps

Best Regards,

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
New Here ,
Jul 28, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
Adobe Community Professional ,
Jul 28, 2017

Copy link to clipboard

Copied

state-button 

Nothing more easy than that. Bildschirmfoto 2017-07-28 um 12.25.11.png

No coding required.

How cool is that then?

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

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.

502f6df408.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 1
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

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.

75cf6a65d9.png

0db68f4123.png

f0b4351a11.png

5b074e828a.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 1
Adobe Community Professional ,
Jul 28, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 1
Guide ,
Jul 28, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
Adobe Community Professional ,
Jul 28, 2017

Copy link to clipboard

Copied

Not so nice Thanks

Uwe

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 28, 2017 0
New Here ,
Jul 29, 2017

Copy link to clipboard

Copied

Thanks, guys! This looks very nice!

Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Jul 29, 2017 0