Image Compare
A great feature is the image compare, especially where you want to compare or display multiple related images. The most obvious is the Before and After showing physical changes to objects or people, or emotional changes to people. But also a real smart way to show multiple items grouped where on a page is limited and/or you want to display larger images.
The plus point is that you are inviting the visitor to interact with your site by sliding the image to reveal the change. This interaction makes your page more engaging which is always a positive.
The first example shows a simple comparison between a sad and then happy person. We’ll let you decide why the young lady has changed emotionally but there is a good bet that your product could be that reason.
Have a go, hold down on the icon and slide left and right.
After
Before
It doesn’t have to start from a sad place, the next example shows a set of portrait pictures with the labels at the top. This time the icon used helps the visitor to understand they can drag the slider left to reveal the After. When using Portrait images they take a lot of vertical space on the display so a Slider makes a lot of sense.
SOW
PREPARE
Another nice layout is to place the comparisons side by side. This time the images are showing a comparison but combining images in pairs to show meal deals at Dickies Cafe, This time there are no labels and the slider icon shows that the sliders can be moved in either direction.
Dickies Double Delights
Hot Choc & Waffle
Salmon & Lemon Lunch
So far the images have been laid out horizontally (side by side), however the images can be laid out vertically so the slider goes up and down. This time the slider hides/reveals two different camps available at Back of the Net.
Back of the Net
Football Camps
Adults
Kids