Bootstrap Gallery
References
- https://bootsnipp.com/snippets/featured/simple-responsive-image-gallery
/*gallery*/
img.gal {
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
-webkit-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
box-shadow: 0px 2px 6px 2px rgba(0,0,0,0.75);
margin-bottom:20px;
}
img.gal:hover {
filter: none; /* IE6-9 */
-webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */
}
<div class="col-md-6 text-center">
<h3>Recent images</h3>
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-6" style="margin-top: 10px;">
<img class="img-responsive gal" src="static/uploaded_images/12498.jpg">
</div>
</div>
</div>