Image change

Inspired by some CC forum regulars I made up this image changer. It could be useful when comparing images, old against new, before and after something. Here I have used two pictures of my late husband, taken 50 years apart.

To see the change effect, you need to scroll down so that the image(s) come into view. I have used the 'out-of-view' effect, and that means that the images have to be hidden from the view initially. So they are best positioned a bit down a page, so that you need to scroll. You could place other page elements before the images in order not to have such a long gap. Here I just have to give the image-holder container lots of top margin.

The building block consists of a container with one background and one inline image. It can be a bit fiddly with the transition and the regular and out-of-view states in the right place. The 'image-holder' has to be given a max-width which is the same as the images' width. The top margin of the 'image-holder' will have to be adjusted, depending on how much page content there is above the images. And the transition duration and delay can be set to your liking. I think I'd recommend not having the delay too short, otherwise the viewers won't be able to take a good look at the inline image before it vanishes.

I have used the Bootstrap system for this, without using any breakpoints. It can be built in exactly the same way in Foundation and Vanilla. Create a component by selecting the 'image-holder'.

Scroll down!

Just filling the page a bit...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.