Bootstrap snippet: Box gallery images

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: images,gallery



<div class="container"> <div class="superbox"> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-1.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-1.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-2.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-2.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-3.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-3.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-4.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-4.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-5.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-5.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-6.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-6.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-7.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-7.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-8.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-8.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-9.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-9.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-10.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-10.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-11.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-11.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-12.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-12.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-13.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-13.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-14.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-14.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-15.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-15.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-16.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-16.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-17.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-17.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-18.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-18.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-19.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-19.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-20.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-20.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-21.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-21.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-22.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-22.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-23.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-23.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-24.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-24.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-1.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-1.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-2.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-2.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-3.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-3.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-4.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-4.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-5.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-5.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-6.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-6.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-7.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-7.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-8.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-8.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-9.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-9.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-10.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-10.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-11.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-11.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-12.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-12.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-13.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-13.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-14.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-14.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-15.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-15.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-16.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-16.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-17.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-17.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-18.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-18.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-19.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-19.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-20.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-20.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-21.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-21.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-22.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-22.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-23.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-23.jpg" alt="" class="superbox-img"> </div> <div class="superbox-list"> <img src="http://seantheme.com/color-admin-v2.0/admin/html/assets/plugins/superbox/img/superbox/superbox-thumb-24.jpg" data-img="assets/plugins/superbox/img/superbox/superbox-full-24.jpg" alt="" class="superbox-img"> </div> </div> </div>
body{margin-top:20px;} .superbox { font-size: 0 } .superbox-list { display: inline-block; width: 12.5%; margin: 0; position: relative } .superbox-list.active:after { content: ''; position: absolute; left: 50%; bottom: 0; border: 10px solid transparent; border-bottom-color: #2d353c; margin-left: -10px } .superbox-show { text-align: center; position: relative; background: #2d353c; width: 100%; float: left; padding: 25px; display: none } .superbox-img { max-width: 100%; width: 100%; cursor: pointer } .superbox-current-img { -webkit-box-shadow: 0 5px 35px rgba(0, 0, 0, .65); box-shadow: 0 5px 35px rgba(0, 0, 0, .65); max-width: 100% } .superbox-img:hover { opacity: .8 } .superbox-close { opacity: .7; cursor: pointer; position: absolute; top: 25px; right: 25px; background: url(assets/plugins/superbox/img/close.gif) center center no-repeat; width: 35px; height: 35px }
Dey-Dey

Box gallery images

Dey-Dey
  Apr 30th, 00:30
33 Views