<div id="window">
    <img src="really-long-image.jpg" alt="" />
</div>
<script>
$( document ).ready(function(){
	$( '#element' ).scrollimageinside();
});
</script>

.scrollimage-up { position: absolute; z-index: 999; top: 0; left: 0; right: 0; bottom: 50%; transition: all .2s; background: linear-gradient(0deg, rgba(25,30,34,0) 0%, rgba(25,30,34,0.4) 100%); opacity: 0; }
.scrollimage-up:hover { opacity: 1; }
.scrollimage-down { position: absolute; z-index: 999; top: 50%; left: 0; right: 0; bottom: 0; transition: all .2s; background: linear-gradient(0deg, rgba(25,30,34,.4) 0%, rgba(25,30,34,0) 100%); opacity: 0; }
.scrollimage-down:hover { opacity: 1; }

$( '#element' ).scrollimageinside({
    easing: 'linear', // Set easing
    speed: 1500, // Scroll speed
    height: 500 // Explicitly set height of scroll window if not set in your own CSS
});