Master the rollover effect in Muse

You can create smooth rollover effect in Muse without any widget. You just need to understand how the State Panel works. There are four states in the panel: normal, rollover, mouse down and active. You can apply different behaviours of the same element in the different states. In this tutorial you will learn how to achieve different rollover effects with an image.

You will need to sets of two different photos of the same person to get this effect. This is how you do it:

  1. Grab the rectangle tool and resize it as you want (make sure you are in Normal state). Go to Fill and upload the first photo. Set it to Scale to fill the rectangle.rollover-effect-adobe-muse1
  2. Click on Rollover state. Go to fill and upload the second photo and set it to scale to fill the rectangle. I have applied a yellow shadow effect for this state but you can choose not to or apply the effect that you want from the tab. Also, set the Fade transition in Normal to ease in and in Rollover to ease out. Do the same in Active state.rollover-effect-adobe-muse4

    First Rollover effect is done and now you are going to learn how to create an advanced effect with the second set of photos.

  3. Repeat step 1. Go to rollover state and upload the second picture. I have added a thick stroke, played with the corner radius and added a smooth glow. This is always options, there are just some ideas of what you can get playing with these tools. Set the Fade transition in Normal to ease in and in Rollover to ease out. Remember to do the same in Active state.rollover-effect-adobe-muse5

    You can create rollover effects in Muse not only playing with opacity, shadows or glows, you can play with strokes and radius to create different shapes like in this tutorial. Watch the video for more detailed information.


Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top