"Responsive Shiny gallery"
Bootstrap 3.2.0 Snippet by ishwarkatwe

Post to Facebook Tweet this

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
26
27
28
29
30
31
32
33
<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 ---------->
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-2.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-4.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-1.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-1.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-2.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
<div class="col-md-4 col-sm-4 col-xs-6 shine_me">
<img src="http://lorempixel.com/output/food-q-c-320-240-4.jpg" class="img-responsive"/>
<i class="shine_effect"></i>
</div>
</div>
</div>
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
26
27
28
29
30
31
32
33
34
35
36
37
.shine_me{
cursor:pointer;
margin-bottom:10px;
}
.shine_me:hover .shine_effect {
/* positioning */
position: absolute;
opacity: 0;
top: 0;
left: 0;
/* gradient */
background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(1%, rgba(255, 255, 255, 0.03)), color-stop(30%, rgba(255, 255, 255, 0.85)), color-stop(50%, rgba(255, 255, 255, 0.85)), color-stop(70%, rgba(255, 255, 255, 0.85)), color-stop(71%, rgba(255, 255, 255, 0.85)), color-stop(100%, rgba(255, 255, 255, 0)));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(left, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
/* IE10+ */
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.03) 1%, rgba(255, 255, 255, 0.6) 30%, rgba(255, 255, 255, 0.85) 50%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 71%, rgba(255, 255, 255, 0) 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#00ffffff',GradientType=1 );
/* IE6-9 */
/* forming the shine element
play around with the width, skew and gradient to get different effects
*/
width: 15%;
height: 100%;
transform: skew(-10deg, 0deg);
-webkit-transform: skew(-10deg, 0deg);
-moz-transform: skew(-10deg, 0deg);
-ms-transform: skew(-10deg, 0deg);
-o-transform: skew(-10deg, 0deg);
/* animating it */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Hipster As F*** Cards
arrow key navigation thumbnail gallery modal view
Responsive Invoice template
Responsive Data Cards (Bootstrap 4)

Questions / Comments: