Rollover - animate image fade + text fade for Image set to Responsive Width + Height

[JimmyMc]

Hi All,

Can anyone suggest how to create the roll over effect at this site? - animalmusic

I have 2 image columns laid out the same side by side set to 'responsive width and height'. I would like to darken the images on roll over with a smooth animated fade in of a black solid to 35% + a text title fade in over the top fading to 100% at at slightly delayed fade in time. Then the same in reverse for roll out.

I have tried a 'state button' + 'state transition button' to group a black rectangle and text layer but the state button can't do 'responsive width + height' only 'responsive width' so it doesn't maintain proportion with the image.

I have also tried importing a png with the text at 100% opacity and black background at 35% which I animated from 0% on 'normal' state and 100% on 'rollover' state with the builtin 'transition fade' for the rollover. This is good because i can set the image to 'responsive width and height' but svg doesn't retain the transparent background so I have to use a png which i'd prefer to avoid if possible as I have to create it outside Muse, the roll out is not smooth and I can't control the fade in time for the black layer and the text independently. I have this example here if it is helpful -  Hometest

I'd greatly appreciate any pointers!

Cheers,

[Günter Heißenbüttel · Accepted solution]

What do you think about this (very!) simple solution: http://fading-images.businesscatalyst.com

This may need breakpoint-wise modifications, because it uses simple text boxes, which don’t scale proportionally.

You can download the corresponding .muse file directly from this sample site.

(Instead of the upper image you may of course use a semitransparent, empty image frame with black background as well.)

[JimmyMc]

Hi Mac,

Thank you very much this is great! your doing it kind of in the reverse stacking order of what I was attempting. Thanks for your assistance!

Cheers,

[Günter Heißenbüttel]

I think, this is worth a glass of beer or two, isn’t it?

[JimmyMc]

Hey Mac,

Sure does but what do you mean exactly? Is a beer a rating system or literally a paypal contribution? I'm not familiar with etiquette on forums. I did endorse you if that is useful.

Let me know as I'm certainly happy to buy you a beer.

Cheers,

[Günter Heißenbüttel]

No, no! Nothing at all! Should have been simply a joke!