"Simple Responsive Image Gallery"
Bootstrap 3.1.0 Snippet by ishwarkatwe

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://www.virginia.org/uploadedImages/virginiaorg/Images/OrgImages/H/HamptonConventionVisitorBureau/Grandview_Nature_Preserve.jpg?width=300&height=200&scale=upscalecanvas" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://th03.deviantart.net/fs70/200H/f/2010/256/0/9/painting_of_nature_by_dhikagraph-d2ynalq.jpg" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://2.bp.blogspot.com/-H6MAoWN-UIE/TuRwLbHRSWI/AAAAAAAABBk/89iiEulVsyg/s400/Free%2BNature%2BPhoto.jpg" /></div> <div class="col-md-3 col-sm-4 col-xs-6"><img class="img-responsive" src="http://blog.arborday.org/wp-content/uploads/2013/02/NEC1-300x200.jpg" /></div> </div> </div>
img { 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:hover { filter: none; /* IE6-9 */ -webkit-filter: grayscale(0); /* Google Chrome, Safari 6+ & Opera 15+ */ }

Related: See More

Now UI Kit Angular
arrow key navigation thumbnail gallery modal view
Image Crop jQuery
Simple Vertical timeline

Questions / Comments:

Everything explain in a well mannered.Thank you for this article.Check www.scanfcode.com for more snippets

Mohit Jain () - 7 years ago - Reply 0

It's awesome but when resize browser window in Firefox UI not pretty well as in chrome.

Karan verma () - 9 years ago - Reply 0

css of this snippet is awsome man ... thanks

Aashish Bijukchhe () - 9 years ago - Reply 0

Thanks for your snippet.
it's awesome
melacak hp

Wedding Centerpieces () - 9 years ago - Reply 0

Thanks, very gut! But how can I open an image? Like a fancybox or something similar?

sam () - 9 years ago - Reply 0

For me, it's not working in Firefox latest the greatest, but in Chrome like a charm

Bata () - 10 years ago - Reply 0

Confirm. I would be great to have solved this for Firefox.

Jimmi08 () - 9 years ago - Reply 0

It would be great, sorry for error.

Jimmi08 () - 9 years ago - Reply 0

Again me. Solved with adding this: filter: grayscale(1);

Jimmi08 () - 9 years ago - Reply 0

There's your answer then. Don't use Firefox...

jambed94 () - 9 years ago - Reply 0

thanks for feedback , Corrections are made for responsive functionality

Ishwar () - 10 years ago - Reply 0

easy, functionnal, gret. A big thanks.

creasitenet () - 10 years ago - Reply 0

Thanks for your snippet. This is very cool fade effect using CSS. It doesn't work on Chrome on Mac: Version 33.0.1750.149, but did on Safari (Mac) Version 6.1 (8537.71). I tried some more CSS3 stuff, but got that working on FireFox but not webkit browers :(
So, yours snippet inspired me to write a fader to B&W effect: http://bootsnipp.com/mrmcco... using jQuery to swap images and some help from StackOverflow.

mrmccormack () - 10 years ago - Reply 0

How can I display 2 images per row in a column set at col-md-7?

Baggiesmad () - 10 years ago - Reply 0

Use col-md-3 col-sm-3 col-xs-6 instead of col-md-3 col-sm-4 col-xs-6 then it wont break when resizing browser.

Imran Iqbal () - 10 years ago - Reply 0

Very good, but it's broken with width: 982px (about). (I sow it with Google Chrome and Mac)

Sergio Pinna () - 10 years ago - Reply 0

wooow :)

Ani () - 10 years ago - Reply 0