Responsive Image Zoom Effect on Hover (or touch) in Javascript – Drift.js Plugin

Responsive Image Zoom Effect on Hover (or touch) in Javascript – Drift.js Plugin:-
IF You you want to add responsive image zoom effect on mouse hover, Then in this post I am going to share simple javascript plugin with no dependency on other plugin like jQuery etc. The plugin name Drift. Drift is a simple, lightweight, no-dependencies JavaScript “zoom on hover” tool from imgix. Move your mouse over the image (or touch it) to see it in action. It is a standalone and highly configurable JavaScript library that provides responsive and smooth hover (or touch) zoom effect on images.

Integrate Responsive Image Zoom Effect on Hover

Libraries

Only required minified Drift.min.js & drift-basic.css on page and all set to configure image zoom effect on hover.

<!--CSS-->
<link rel="stylesheet" media="screen, projection" href="drift-basic.min.css">
 
<!--JS-->
<script src="Drift.min.js"></script>

<img src="https://assets.imgix.net/dog.png?w=400" data-zoom="http://assets.imgix.net/dog.png?w=1200">

<div class="detail">
</div>

new Drift(document.querySelector('img'), {
  paneContainer: document.querySelector('.detail')
});