Image Scroll On Hover - jQuery imageScroller

imageScroller is a really simple jQuery plugin which automatically scrolls the image on hover if the image's height is larger than its container's height.

How to use it:

1. Wrap your image into a containers which has a fixed height. Note that the plugin don't scroll the image if image's height is smaller that screen's height.

<div class="screen">
  <img src="1.jpg">
</div>

<div class="screen">
  <img src="2.jpg">
</div>

<div class="screen">
  <img src="3.jpg">
</div>

...

.screen {
  height: 350px;
  overflow: hidden;
  ...
}

2. Place jQuery library and the JavaScript file jquery-image-scroll.js right before the closing body tag.

<script src="https://code.jquery.com/jquery-1.12.4.min.js" 
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" 
        crossorigin="anonymous">
</script>
<script src="jquery-image-scroll.js"></script>

3. Enable the scroll on hover effect by calling the function scrollImage() on the image container.

$( window ).on( 'load', function(){
  $( '.screen' ).scrollImage();
})

4. Customize the duration of the scroll animation using the data-duration attribute like this:

<div class="screen" data-duration="1000">
  <img src="1.jpg">
</div>

<div class="screen" data-duration="3000">
  <img src="2.jpg">
</div>

<div class="screen" data-duration="5000">
  <img src="3.jpg">
</div>

---

This awesome jQuery plugin is developed by uzess. For more Advanced Usages, please check the demo page or visit the official website.