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.
Download this component
This component can be used both for 'mobile-up' and 'desktop-down'.
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.
Download this component
This component can be used both for 'mobile-up' and 'desktop-down'.