Creating a transition using a rollover effect

In this section I will present you the rollover effects you can apply on your images; the result will be that the two images will perform an animated translation one into the other as the mouse pointer is rolled over them. You can directly select the effect from the list and quickly edit it by pressing the "Edit item" button.

Rollover effect configuration

Rollover effect configuration

The effects you can choose from are listed in the following image, and presented in detail in the following sections.

Rollover effects list

Rollover effects list

All the effects have a configuration panel which you can access from the “Edit item” button. I will present you this panel below and describe the parameters they contain; with some small differences the options are the same for all effects, so the next paragraph applies to all the rollover effects.

Rollover effects configuration panel

Rollover effects configuration panel

We can set the duration of the effect by insert a number (of seconds) in the "Duration" text field; the percentage of fading that will accompany the change between images is controlled from the "Fade" option. The "Position" parameter controls the direction from where the effect will be applied; it can have different values for different effects - left, right, top, bottom, horizontal, vertical and so forth. Also, we can set the sense the effect will run, normal or reversed; if you want to change this, check the "Reversed" check-box.


Click here to see the sample gallery with all the Rollover Effects.