Before and after...
Examples
Defaults
Here is how 2 View operates straight out of the box with all default values.
Labels
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.
Default labels
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.
Addition of circle with blur and shadow effects also activated.
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.
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.
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.
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:
2 View
A powerful image compare stack with some novel features
Buy for
Buy for
Buy for
Over 60% off!
Stacks bundle
Our stacks bundle includes ALL of our stacks in one incredible bundle dea (along with an exclusive project file)l!
Buy for
Buy for
Buy for
FAQs
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.
