leemengtaiwan
10/17/2017 - 2:00 PM

Bootstrap Gallery

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>