Blending images

Placeholder Picture

Just after sunset, Arendal in Southern Norway

That grayscale photo looks a bit dull, doesn't it? Mouse over it, and you will see the colours. On a phone tap on it, and then tap outside the image to get back to the grayscaled one.  A nice feature for comparing two images, be it before and after something, or colour variations. It's easy to create, just a container with one background image and one inline image, and then adjust the opacity and transition for the regular and hover states. It is full possible to have more than one such blending image on a page.

This building block uses no breakpoints that will interfere with any other breakpoints on your site. It is a straight-forward thing, and can be created in Bootstrap and Vanilla in exactly the same way as here. To make a component, select the container 'image-holder'.