bootstrap zoomable css

[xuanngo2001]

https://bootsnipp.com/snippets/K0e9x

[xuanngo2001]

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

[xuanngo2001]

https://www.codeply.com/go/JuADMG3eTG/bootstrap-image-hover-css-zoom-scale

<div class="container">
<hr>
  <div class="row">

    <div class="col-md-4 img-hover">

      <img class="img-responsive img-rounded" src="http://placehold.it/300">

    </div>

  </div>

</div>

.img-hover img {
    -webkit-transition: all .3s ease; /* Safari and Chrome */
    -moz-transition: all .3s ease; /* Firefox */
    -o-transition: all .3s ease; /* IE 9 */
    -ms-transition: all .3s ease; /* Opera */
    transition: all .3s ease;
    position:relative;
}
.img-hover img:hover {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform:translateZ(0) scale(1.20); /* Safari and Chrome */
    -moz-transform:scale(1.20); /* Firefox */
    -ms-transform:scale(1.20); /* IE 9 */
    -o-transform:translatZ(0) scale(1.20); /* Opera */
    transform:translatZ(0) scale(1.20);
}

.img-hover:hover:after {
    content:"";
    position:absolute;
    top:0;
    left:0;
    z-index:2;
    width:30px;
    height:30px;
    border:1px solid #000;
}

.grayscale {
  -webkit-filter: brightness(1.10) grayscale(100%) contrast(90%);
  -moz-filter: brightness(1.10) grayscale(100%) contrast(90%);
  filter: brightness(1.10) grayscale(100%); 
}

[xuanngo2001]

https://stackoverflow.com/questions/40526190/bootstrap-image-zoom