<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 ---------->
<div class="container">
<div class="row">
<h2>Image Hover Effect</h2>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 product_item">
<div class="zoom-out-effect left">
<div class="img-box">
<img src="https://www.scarletross.in/user.v2/images/prdct-dtail-img3.jpg" alt="...">
</div>
</div>
</div>
</div>
.img-box{
display: block;
width: 100%;
height: 100%;
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden
}
.img-box img{
display: block;
position: relative;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out
}
.img-box {
position: relative
}
.info-box .info-content {
line-height: 1;
display: table-cell;
vertical-align: middle;
color: #fff;
padding-left: 10px;
padding-right: 10px
}
.zoom-out-effect {
display: block;
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
.zoom-out-effect .img-box {
top: 0;
right: 0;
bottom: 0;
left: 0;
color: #e6e6e6
}
.zoom-out-effect .img-box a, .zoom-out-effect .img-box a:active, .zoom-out-effect .img-box a:focus a:focus {
color: #999
}
.zoom-out-effect .img-box a:active:hover, .zoom-out-effect .img-box a:focus:hover, .zoom-out-effect .img-box a:hover{
color: #f2f2f2
}
.zoom-out-effect .img-box {
z-index: 0
}
.zoom-out-effect:hover .img-box {
-webkit-transform: translateZ(0) scale(1.15, 1.15);
-moz-transform: translateZ(0) scale(1.15, 1.15);
-ms-transform: translateZ(0) scale(1.15, 1.15);
-o-transform: translateZ(0) scale(1.15, 1.15);
transform: translateZ(0) scale(1.15, 1.15)
}
