dubravkoL/jsbin.vawuxeyu.css

## jsbin.vawuxeyu.css
.thumbs-block {
    position:relative; /**/
    overflow: hidden;
    background: #ccc;
    margin: 0 5px;
    width: 714px;
    height:142px;      /**/
}
.thumbs-block .thumbs {
    white-space: nowrap;
    text-align: center;
}
.thumbs-block .thumb {
    display: inline-block;
    padding: 5px;
    margin: 5px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.3);
    height: 120px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.thumbs{
  position:absolute;  /**/
  margin-left:0;      /**/
}

## jsbin.vawuxeyu.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>

  This one will have 60px "mousemove padding" at each side:

  <div class="thumbs-block">
    <div class="thumbs">
      <a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=1" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=2" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=3" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=4" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=5" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=6" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=7" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=8" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=9" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=10" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=11" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=12" width="120" height="120" /></a>

    </div>
</div>


</body>
</html>

## jsbin.vawuxeyu.js
$(function(){

    var $bl    = $(".thumbs-block"),
        $th    = $(".thumbs"),
        blW    = $bl.outerWidth(),
        blSW   = $bl[0].scrollWidth,
        wDiff  = (blSW/blW)-1,  // widths difference ratio
        mPadd  = 60,  // Mousemove Padding
        damp   = 20,  // Mousemove response softness
        mX     = 0,   // Real mouse position
        mX2    = 0,   // Modified mouse position
        posX   = 0,
        mmAA   = blW-(mPadd*2), // The mousemove available area
        mmAAr  = (blW/mmAA);    // get available mousemove fidderence ratio

	$bl.mousemove(function(e) {
        mX = e.pageX - this.offsetLeft;
        mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
	});

	setInterval(function(){
		posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
		$th.css({marginLeft: -posX*wDiff });
	}, 10);

});
	.thumbs-block {
	position:relative; /**/
	overflow: hidden;
	background: #ccc;
	margin: 0 5px;
	width: 714px;
	height:142px; /**/
	}
	.thumbs-block .thumbs {
	white-space: nowrap;
	text-align: center;
	}
	.thumbs-block .thumb {
	display: inline-block;
	padding: 5px;
	margin: 5px;
	background: rgba(0, 0, 0, 0.2);
	border: 1px solid #ccc;
	border: 1px solid rgba(0, 0, 0, 0.3);
	height: 120px;
	-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	.thumbs{
	position:absolute; /**/
	margin-left:0; /**/
	}
	<!DOCTYPE html>
	<html>
	<head>
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>

	This one will have 60px "mousemove padding" at each side:

	<div class="thumbs-block">
	<div class="thumbs">
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=1" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=2" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=3" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=4" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=5" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=6" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=7" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=8" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=9" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=10" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=11" width="120" height="120" /></a>
	<a href="#" rel="group" class="fancybox thumb"><img src="http://placehold.it/120x120&text=12" width="120" height="120" /></a>

	</div>
	</div>




	</body>
	</html>
	$(function(){

	var $bl = $(".thumbs-block"),
	$th = $(".thumbs"),
	blW = $bl.outerWidth(),
	blSW = $bl[0].scrollWidth,
	wDiff = (blSW/blW)-1, // widths difference ratio
	mPadd = 60, // Mousemove Padding
	damp = 20, // Mousemove response softness
	mX = 0, // Real mouse position
	mX2 = 0, // Modified mouse position
	posX = 0,
	mmAA = blW-(mPadd*2), // The mousemove available area
	mmAAr = (blW/mmAA); // get available mousemove fidderence ratio

	$bl.mousemove(function(e) {
	mX = e.pageX - this.offsetLeft;
	mX2 = Math.min( Math.max(0, mX-mPadd), mmAA ) * mmAAr;
	});

	setInterval(function(){
	posX += (mX2 - posX) / damp; // zeno's paradox equation "catching delay"
	$th.css({marginLeft: -posX*wDiff });
	}, 10);

	});