"Simple Image Zoom Effect for Portfolios"
Bootstrap 3.2.0 Snippet by Sentence

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<article class="col-xs-12 col-sm-6 col-md-3">
<div class="panel panel-default">
<div class="panel-body">
<a title="Nature Portfolio" class="zoom" data-title="Amazing Nature" data-footer="The beauty of nature" data-type="image" data-toggle="lightbox">
<img src="http://lorempixel.com/350/350/nature/4" alt="Nature Portfolio" />
<span class="overlay"></span>
</a>
</div>
</div>
</article>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.panel { position: relative; overflow: hidden; display: block; border-radius: 0 !important; }
.panel-default { border-color: #ebedef !important; }
.panel .panel-body { position: relative; padding: 0 !important; overflow: hidden; height: auto; }
.panel .panel-body a { overflow: hidden; }
.panel .panel-body a img { display: block; margin: 0; width: 100%; height: auto;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
}
.panel .panel-body a.zoom:hover img { transform: scale(1.2); -ms-transform: scale(1.2); -webkit-transform: scale(1.2); -o-transform: scale(1.2); -moz-transform: scale(1.2); }
.panel .panel-body a.zoom span.overlay { position: absolute; top: 0; left: 0; visibility: visible; height: 100%; width: 100%; background-color: #000; opacity: 0.55; -moz-opacity: 0.55; -webkit-opacity: 0.55; filter: alpha(opacity=65); -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
transition: opacity .25s ease-out;
-moz-transition: opacity .25s ease-out;
-webkit-transition: opacity .25s ease-out;
-o-transition: opacity .25s ease-out;
}
.panel .panel-body a.zoom:hover span.overlay { display: block; visibility: hidden; opacity: 0; }
.panel .panel-body a.zoom:hover span.overlay i { position: absolute; top: 45%; left: 0%; width: 100%; font-size: 2.25em; color: #fff !important; text-align: center;
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
filter: alpha(opacity=1);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: