Image Over Slider Effect Moves Across The Image

This demo basically need to highlight the differences between the two images? This design is a visual difference tool, makes it easy to spot them!

Slider effect moves across the image

How it works to moves across the image ?

Image Over Slider works by stacking two images on top of each other. As the example slider moves across the image, it makes use of the CSS clip property to trim the image on the left or right vies-versa. This allows the image on the right to show through the container.

In the design we are using custom movement events jquery.event.move Jquery library in order to support 1:1 slider movement on mobile devices.

How To Setting Up Image Over Slider Effect Moves Across The Image:

Integration of this code is simple and easy to get started, just wrap two images inside of one container. The first image will be on the left and the second one will be on the side of right. Check below example for container:

<div id="container1">
<img src="sample-before.png">
<img src="sample-after.png">
</div>
Then call twentytwenty() on this container once the images have loaded:

$(window).load(function() {
$("#container1").twentytwenty();
});

Demo      Download Source Code

* Do you like this story? Then why not share it with your Friends *
If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to our regular Email Updates!

Himanshu is a young engineer living in India. Currently working at LiveCareer as a software engineer. He is an ethical hacker & blogger too, doing lots of crazy stuff... If you seem interesting, go through his portfolio: www.himstar.info : "Open Source. Millions of open minds can't be wrong!"

4 comments: On Image Over Slider Effect Moves Across The Image

  • Wow, incredible blog layout! How long have you been blogging for?
    you make blogging look easy. The overall look of your site
    is great, let alone the content!

  • Great website. A lot of helpful information here. I'm sending it to several buddies ans also
    sharing in delicious. And of course, thanks for your effort!

  • whoah this weblog is wonderful i really like reading your articles.

    Keep up the good work! You understand, a lot of persons are searching round for this info,
    you can help them greatly.

  • Piece of writing writing is also a fun, if you know after that you
    can write if not it is complicated to write.

Leave a reply:

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Site Footer

Sliding Sidebar

We are India’s largest Startup Community


We are team of ' Delhi Startups ' , most active startup community with strict spam policy.
We are making !deas happen..for future, business and jobs without charging anything, with connecting entrepreneurs.. It's a reason to trust on us.
Come and join or subscribe, we will defiantly give a reason to like us.

Our Facebook Page