The ability to add hover action to a graphic on your site is one of the best features of ProPhoto tiles. The possibilities are endless in terms of what can be done by editing settings for each tile layer.
So how can I create movement?
Simply put, a layer will move (change in orientation, size, opacity, color, position, or border) when a setting in the hover state differs from a setting in the default state. Below is a review of some of the most common types of changes.
The hover state of each layer has a transition area. The options there allow for customizing the style of the transition from the default to the hover state. The all tab does what you would think. It applies the same settings to every hover state change. The individual tab reveals how you can adjust the transition for each option (scale, opacity, color, position, etc.) in a single layer.
- Duration represents the time the transition will take, in milliseconds.
- Easing refers to the pace of the transition. Linear uses the same speed from start to end while the others will employ a slow start or end or both.
- Delay makes it possible for transitions to start a certain number of milliseconds after hover.
The all tab does what you would think. It applies the same settings to every hover state change. To style a single option in a layer differently use the individual option. This video shows a sub-title text layer with a transform duration of 700ms and a delay of 700ms. Take note of how the sub-title takes starts transitioning after the main title and how the transition takes longer. .