in ,

WordPress highlight the differences between two images

Need to highlight the differences between two images? TwentyTwenty, a visual diff tool, makes it easy to spot them! TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container. Using custom movement events from the jquery.event.move library in order to support 1:1 slider movement on mobile devices.

TwentyTwenty is very simple to use you just upload two identical sized images to the media library. When inserting images into a post, make sure the attachment display settings for image size are the same. Add the [TwentyTwenty] short-code above the before image. Add [/TwentyTwenty] after the second image. Here’s an example of the shortcode added to a post.

Using The WordPress Dashboard

  • Navigate to the ‘Add New’ in the plugins dashboard
  • Search for ‘TwentyTwenty
  • Click ‘Install Now’
  • Activate the plugin on the Plugin dashboard

Or Download the plugin from here. Download

Check the video below:

What do you think?

Written by Sopheap

The goal of me is sharing new ideas, inspiration art, fresh and useful resource, covering web design and development, graphic design, advertising, mobile development and life style.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

Add Social Share button To Your WordPress Site

Add Social Share button To Your WordPress Site

10 Great WordPress Gallery Plugins

10 Great WordPress Gallery Plugins