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-holderclass 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.
Blending Images
Mouse over the image!
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