2 View

Image comparison

A new take on the before and after image comparison viewer

Before and after...

2 View allows you to present an 'after' image on top of a 'before' image and lets the user show and reveal each. It is far easier for users to compare the difference when images are presented in this way.
And this particular image comparison stack has numerous bells and whistles that set it apart. Check out the examples below to see these in action!



Here is how 2 View operates straight out of the box with all default values.

image image2


We can add labels to the images. Default text is 'Before' and 'After' but this can be changed to whatever is appropriate. In addition the labels can be set to be shown at all times or only when the images are hovered over.

image image2

Default labels

image image2

Customised label content that is shown on hover

Control line

The control line and markers can be adapted to incorporate a circle (with optional blur effect / shadow). We can also change this line's color and set its starting point to be whatever we like.

image image2

Addition of circle with blur and shadow effects also activated.

image image2

Set up elements to pick up one of the color variables used on the page and set the starting point to be 80%.

Vertical split

A nice option that 2 View offers us is to create a vertical split that reveals the second image in a top-to-bottom direction.

image image

Addition of content

You can opt to add some (limited) content above the images - with full control over positioning. This might be useful for a title, a button or an icon etc.

image image2

Black and white effect

Addition of a title positioned in the top-centre.

Here we have added an SVG icon for 2 View stack that links to another web page

Control height

The default setup shows the full image in whatever aspect ratio it is. You can however opt to control the height of 2 View which can be useful if you are wanting it to take up the full width but not also the default height that it would require.

image image2

Visit Norway

Here we have set the image to be 300px on small devices and 40vh on larger ones.

Get 2 View

You can get this stack on its own or as part of our hugely discounted stacks bundle.

Our stacks bundle includes 2 View and ALL of our other stacks that are currently available. Buying as a bundle offers huge savings compared to buying the stacks separately. Currently the bundle consists of the following stacks:

  • Grid Enabler
  • Magic Mouse
  • Magic Mouse 2
  • Markdown Link
  • Parallaxer
  • Scroller Plus
  • Source Addons
  • Splider 2



2 View

A powerful image compare stack with some novel features

Over 60% off!


Stacks bundle

Get ALL of our stacks in one incredible bundle deal!


Below are some of the most common questions about this and our other stacks.

Stack FAQs

Yes. You can use the same image for the before and after images and apply an effect via css to one of the copies. You could for example have the normal image and also the same image with a blur effect. This means you are loading only 1 image but displaying it in 2 different ways.

General FAQs

Yes this stack has been designed to work in any framework. If you encounter any issues then please contact us with an example and we will do our best to resolve.

All our stacks use only local resources, collect no data and include no calls to remote servers or CDNs etc. As such the stacks are completely GDPR compliant.

We have a full supporting Knowledge Base including articles for all of our stacks and settings. If you can’t find what you need there then do not hesitate to reach out to us via your preferred channel.

The whole site has been built with Source micro framework. In addition, this page also uses (obviously). Finally, this FAQ section has been built with Toggle stack and the Bundle details section above uses Moreish stack.

Source Icon

Built with Source