<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 */
}
