Gallery with pagination

This bootstrap snippet called "Gallery with pagination" was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: gallery,images

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div id="grid" class="row">
                <div class="mix col-sm-3 page1 page4 margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/1" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3 page2 page3 margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/2" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3  page3 page2 margin30 ">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/3" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3  page4 margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/4" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3 page1 margin30 ">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/5" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3  page2 margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/6" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3  page3 margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/7" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 

                </div>
                <div class="mix col-sm-3 page4  margin30">
                    <div class="item-img-wrap ">
                        <img src="https://lorempixel.com/500/333/nature/8" class="img-responsive" alt="workimg">
                        <div class="item-img-overlay">
                            <a href="#" class="show-image">
                                <span></span>
                            </a>
                        </div>
                    </div> 
                </div>                                                            
            </div><!--grid-->
        </div>
    </div>
    <div class="row gallery-bottom">
        <div class="col-sm-6">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                <li class="active"><a href="#">1</a></li>
                <li><a href="#">2</a></li>
                <li><a href="#">3</a></li>
                <li><a href="#">4</a></li>
                <li><a href="#">5</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="col-sm-6 text-right">
            <em>Displaying 1 to 8 (of 100 posts)</em>
        </div>
    </div>
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}

.margin30 {
    margin-bottom: 30px;
}

.item-img-wrap {
    position: relative;
    text-align: center;
    overflow: hidden;
}

.item-img-wrap img {
    -moz-transition: all 200ms linear;
    -o-transition: all 200ms linear;
    -webkit-transition: all 200ms linear;
    transition: all 200ms linear;
    width: 100%;
}

/************************image hover effect*******************/
.item-img-wrap {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.item-img-wrap img {
  -moz-transition: all 200ms linear;
  -o-transition: all 200ms linear;
  -webkit-transition: all 200ms linear;
  transition: all 200ms linear;
  width: 100%;
}

.item-img-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

.item-img-overlay span {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(http://bootstraplovers.com/templates/assan-2.2/main-template/img/plus.png) no-repeat center center rgba(0, 0, 0, 0.7);
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  opacity: 0;
  -moz-transition: opacity 250ms linear;
  -o-transition: opacity 250ms linear;
  -webkit-transition: opacity 250ms linear;
  transition: opacity 250ms linear;
}

.item-img-wrap:hover .item-img-overlay span {
  opacity: 1;
}

.item-img-wrap:hover img {
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}


/*************pagination***********/
.gallery-bottom .pagination {
  margin-top: 0px;
}

.pagination > li > a, .pagination > li > span {
  background-color: #ccc;
  padding: 3px 9px;
  color: #fff;
  border: 0px;
}

.pagination > li > a {
  margin-right: 5px;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
  background-color: #32c5d2;
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 30th 2016, 08:47

Views: 8.0K

Rated 5/5 based on 6 reviews