"zoom"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<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 ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/adammacias/pen/gpWBOg?depth=everything&limit=all&order=popularity&page=5&q=thumbnail&show_forks=false" /> <link rel='stylesheet prefetch' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'> <style class="cp-pen-styles">.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; } </style></head><body> <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 src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <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') + ')' }); }) //# sourceURL=pen.js </script> </body></html>

Related: See More

Material Dashboard Pro React
Zoom Social Icon Hover Animation

Questions / Comments: