"Thumbnail Hover zoom Images without click | Alpha v.1 (Test)"
Bootstrap 3.3.0 Snippet by eXP Design

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <header> <div id="demo" class="container"> <div class="row"> <div class="col-md-12"> <h1>Thumbnail Hover zoom Images without click</h1> <p><b>Help Comments in Code</b> <br> Alpha v.1 (Test - No Mobile Support - you can add it, or wait a bit for new Version - Try to View <a href="https://bootsnipp.com/fullscreen/K0e9x" target="blank">Full-Screen</a>) </p> </div> <div class="col-md-4 item-1 "> <img src="https://static.pexels.com/photos/632523/pexels-photo-632523.jpeg" class="img-responsive" /> </div> <div class="col-md-4 item-2"> <img src="https://static.pexels.com/photos/633198/pexels-photo-633198.jpeg" class="img-responsive" /> </div> <div class="col-md-4 item-3"> <img src="https://static.pexels.com/photos/633276/pexels-photo-633276.jpeg" class="img-responsive" /> </div> </div> </div> </header>
header /* delet it */ { height:100vh; background-color:#444444; font-family:roboto; } #demo h1 /* delet it */ { text-align:center; color:#888; padding-bottom:5px; } #demo p /* delet it */ { text-align:center; color:#777; padding-bottom:15px; font-size:21px; letter-spacing:1px; } #demo .row /* delet it */ { padding-top:20vh; padding-bottom:40px; } #demo img { box-shadow:1px 1px 5px #000; max-height:15em; /* delet it */ } #demo img:hover { transition:all 0.6s; /* Change Speed */ -ms-transform: scale(2, 2); /* IE 9 */ -webkit-transform: scale(2, 2); /* Safari */ transform: scale(2, 2); /* Change Size */ overflow:visible; z-index:1 !important; /* you can change it, but better let this in default */ } #demo .item-1:hover { -ms-transform: translate(100px); /* IE 9 */ -webkit-transform: translate(100px); /* Safari */ transform: translate(100px); /* Change Offset */ z-index:2; /* you can change it, but better let this in default */ } #demo .item-2:hover { z-index:2; /* you can change it, but better let this in default */ } #demo .item-3:hover { -ms-transform: translate(-100); /* IE 9 */ -webkit-transform: translate(-100px); /* Safari */ transform: translate(-100px); /* Change Offset */ z-index:2; /* you can change it, but better let this in default */ }

Related: See More


Questions / Comments: