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.
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.
The image used in this component comes from Pixabay.
Blending Images
Hover over the image to let some colour show!
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.
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.
The image used in this component comes from Pixabay.
Download the Blending Images component