Blending Images

Placeholder Picture

Blending Images

That rose needs a bit of colour, mouse over it!

You need two images of the same size, in this case we have a colour picture, and the same one converted to grayscale.The colour picture has been set as the background of a container, and the grayscale one is placed inside the container, covering it.

If you want to change the size of the image, it has to be done on both the .blending-image-holder class and the .picture-2.

When changing to hover state, make the grayscale image transparent by setting the opacity to Zero. It is important that this is done in 'Opacity and Shadow' on the Style pane, Design tab, and NOT in the Effects tab.

Placeholder Picture

Download this component

This component can be used both for 'mobile-up' and 'desktop-down'.