5 Replies Latest reply on Jan 2, 2017 10:16 PM by Günter Heißenbüttel

    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,