"TEST: Simple image zoom"
Bootstrap 3.1.0 Snippet by mrmccormack

<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 });

Related: See More


Questions / Comments: