<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ----------> <main class="container"> <header class="jumbotron text-center"> <h1>Thumbnails Hover Zoom Bootstrap</h1> </header> <div class="row"> <article class="col-sm-6 col-md-4"> <div class="thumbnail"> <div class="ex-thumbnail-zoom"> <div class="ex-thumbnail-zoom-img" data-scale="2" data-image="https://expo.getbootstrap.com/screenshots/microsoft-power-bi.jpg"></div> </div> <div class="caption"> <h3>Microsoft Power BI <small>(zoom 2x)</small></h3> <p>June 5, 2015</p> </div> </div> </article> <article class="col-sm-6 col-md-4"> <div class="thumbnail"> <div class="ex-thumbnail-zoom"> <div class="ex-thumbnail-zoom-img" data-scale="4" data-image="https://expo.getbootstrap.com/screenshots/twenty-over-ten.jpg"></div> </div> <div class="caption"> <h3>Twenty Over Ten <small>(zoom 4x)</small></h3> <p>June 4, 2015</p> </div> </div> </article> <article class="col-sm-6 col-md-4"> <div class="thumbnail"> <div class="ex-thumbnail-zoom"> <div class="ex-thumbnail-zoom-img" data-scale="6" data-image="https://expo.getbootstrap.com/screenshots/ing-world.jpg"></div> </div> <div class="caption"> <h3>ing.world <small>(zoom 6x)</small></h3> <p>June 3, 2015</p> </div> </div> </article> </div><!-- /.row --> <p class="text-center">Forked by <a href="https://codepen.io/ccrch/pen/yyaraz/">ccrch</a> and Re-design by <a href="https://codepen.io/adammacias/">adammacias</a> and thumbnails by <a href="https://expo.getbootstrap.com/">Bootstrap Expo</a>.</p> </main> <script> var elementThumbnailPhoto = 'ex-thumbnail-zoom-img'; var elementPhoto = 'ex-zoom-photo'; $('.' + elementThumbnailPhoto) // tile mouse actions .on('mouseover', function() { $(this).children('.' + elementPhoto).css({ 'transform': 'scale(' + $(this).attr('data-scale') + ')' }); }) .on('mouseout', function() { $(this).children('.' + elementPhoto).css({ 'transform': 'scale(1)' }); }) .on('mousemove', function(e) { $(this).children('.' + elementPhoto).css({ 'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 + '%' }); }) // tiles set up .each(function() { $(this) // add a photo container .append('<div class="' + elementPhoto + '"></div>') // set up a background image for each tile based on data-image attribute .children('.' + elementPhoto).css({ 'background-image': 'url(' + $(this).attr('data-image') + ')' }); }) </script>

.ex-thumbnail-zoom { cursor: crosshair; position: relative; top: 0; left: 0; width: 100%; height: 250px; } .ex-thumbnail-zoom-img { position: relative; float: left; width: 100%; height: 100%; overflow: hidden; } .ex-zoom-photo { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: cover; transition: transform .5s ease-out; } /* Ignore */ body { padding-top: 20px; } .jumbotron { margin-top: 10px; padding: 10px 0; } .jumbotron h1 { font-size: 35px; margin-bottom: 20px; }