<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TEST: Simple image zoom</h2>
<div class="row">
<div class="col-md-4">
<div class="zoomer">
<div class="large"></div>
<div class="small">
<div class="scale"></div>
</div>
</div>
</div>
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4">.col-md-4</div>
</div>
</div>
</div>
.zoomer,
.zoomer .small,
.zoomer .large {
background: url(http://uploads0.wikipaintings.org/images/georges-seurat/study-for-a-sunday-on-la-grande-jatte-1885.jpg) no-repeat;
background-size: cover;
height: 273px;
position: absolute;
width: 414px;
}
.zoomer .small,
.zoomer .scale {
cursor: none;
}
.zoomer .scale {
box-shadow: 0 0 60px 3px #fff, 0 0 12px rgba(0,0,0,0.2) inset;
height: 68px;
opacity: 0;
pointer-events: none;
position: absolute;
width: 103px;
transition: opacity 200ms ease-in-out;
}
.zoomer .large {
background-size: auto;
transition: left 200ms ease-in-out;
}
$(document).ready(function() {
var zoomMargin = 5;
function endZoom(e) {
$('.zoomer .large').css('left', '');
$('.scale').css('opacity', '');
}
function moveZoom(e) {
var x = e.pageX,
y = e.pageY,
w = $(this).width(),
h = $(this).height();
$('.large').css({
'background-position': (x / w * 100) + '% ' + (y / h * 100) + '%'
});
$('.scale').css({
'opacity': 1,
'left': Math.round((x / w) * (w - 103)),
'top': Math.round((y / h) * (h - 68))
});
}
function startZoom(e) {
$('.zoomer .large').css('left', $(this).width() + zoomMargin);
}
$('.small').on({
'mouseenter': startZoom,
'mousemove': moveZoom,
'mouseleave': endZoom
});//@ sourceURL=pen.js
});
