Add movement to a tile

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.

Size changes

For a layer to change size on hover you work with the scale setting in each layer. For it to grow, the scale must be a larger number in the hover state then in the default state. Be careful! Too much zoom can cause the text or image to be blurry. In these cases it may be helpful to start a bit zoomed out in the default state so you can zoom in to 1 on the hover state. The video below shows how this is done with a scale of .75 on the default state text layer and 1 on the hover state.

Opacity changes

Changing the opacity on hover makes possible some neat things. A common use is to make text a bit more readable when you hover. In the example below, I’ve created a gray colored shape layer that covers the entire tile. It sits on top of the background image but underneath the text. It’s default opacity is set to 0, which makes it invisible. It’s hover opacity is set to 0.39. The effect is a darkening of the background image so white text is more easily read.

You can use opacity to completely swap out one layer for another on hover. In the example below the “laughing” image layer is set to an opacity of 0 on default, allowing the “serious” layer underneath to show. Then on hover, laughing is set to 1, which covers the serious layer underneath. Check it out.

Position changes

A layer can slide any direction by giving it a different position in the hover state. In the example below, the two text layers and the shape layer are dragged below the visible preview in the default state. In the hover state they have been put back in the preview. This gives the appearance of sliding up on hover.

Fine tune the position by clicking the preview with the desired layer selected and using the arrow keys on your keyboard or by changing values in the transforms area.

Color changes

Only shape and text layers have color options. For shape layers, choose the background color you want for both states and you’ll see the change when the tile is hovered. Shape layers have a border color you can change, as well. The default state of text layers will show the color set for the font style chosen. Change the hover color by checking the override text color box and selecting a color.

Transition options

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. .