Bootstrap snippet: image gellery

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: gallery,images



<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"> <section class="content-item" id="gallery"> <div class="container"> <div class="content-headline"> <h2>Image gallery</h2> <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h3> </div> <div class="row"> <!-- GALLERY ITEM 1 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/5/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_01.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 1 - END --> <!-- GALLERY ITEM 2 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/4/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_02.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 2 - END --> <!-- GALLERY ITEM 3 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/3/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_03.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 3 - END --> <!-- GALLERY ITEM 4 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/2/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_04.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 4 - END --> <!-- GALLERY ITEM 5 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/1/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_05.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 5 - END --> <!-- GALLERY ITEM 6 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/6/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_06.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 6 - END --> <!-- GALLERY ITEM 7 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/7/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_07.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 7 - END --> <!-- GALLERY ITEM 8 - START --> <div class="overlay-wrapper col-xs-6 col-sm-3"> <img src="http://lorempixel.com/350/300/nature/8/" class="img-responsive" alt=""> <span class="overlay"> <a href="#assets/images/image_08.JPG" class="show-image"><i class="fa fa-plus"></i></a> <a href="#" class=""><i class="fa fa-link"></i></a> </span> </div> <!-- GALLERY ITEM 8 - END --> </div> </div> </section>
body{margin-top:20px;} /*----------------------------*/ .content-item { padding:30px 0; background-color:#FFFFFF; } .content-item.grey { background-color:#F0F0F0; padding:50px 0; height:100%; } .content-item h2 { font-weight:700; font-size:35px; line-height:45px; text-transform:uppercase; margin:20px 0; } .content-item h3 { font-weight:400; font-size:20px; color:#555555; margin:10px 0 15px; padding:0; } .content-headline { height:1px; text-align:center; margin:20px 0 70px; } .content-headline h2 { background-color:#FFFFFF; display:inline-block; margin:-20px auto 0; padding:0 20px; } .grey .content-headline h2 { background-color:#F0F0F0; } .content-headline h3 { font-size:14px; color:#AAAAAA; display:block; } #gallery .row { margin:0; } #gallery .row > div { padding:0; } #gallery .overlay-wrapper:hover .overlay { background-color:rgba(0,0,0,0.7); } #gallery-item h2 { font-size:28px; margin-top:0; } #gallery-item img { background-color:#FFFFFF; border:3px solid #999999; padding:7px; } .overlay-wrapper { position:relative; } .overlay-wrapper .overlay { bottom:0; left:0; opacity:0; overflow:hidden; position:absolute; right:0; top:0; text-align:center; padding-top:25%; transition:all 0.4s ease; } .overlay-wrapper .overlay a { font-size:20px; width:50px; height:50px; color:#FFFFFF; display:inline-block; text-align:center; padding-top:12px; border-radius:50%; margin-right:15px; opacity:0.8; } .overlay-wrapper .overlay a:last-child { margin-right:0; } .overlay-wrapper .overlay a:hover { background-color:#333333; color:#FFFFFF; } .overlay-wrapper:hover .overlay { background-color:rgba(0,0,0,0.5); opacity:1; }
Dey-Dey

image gellery

Dey-Dey
  Apr 9th, 00:07
1.7K Views