Porfolio work

This bootstrap snippet called "Porfolio work" 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: portfolio,gallery

HTML code

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

<section id="portfolio" class="section">
        <div class="container-fluid section-wrapper">
            <div class="section-content">
                <div class="row">
                    <div class="col-md-12 text-center">
                        <h2 class="section-title">My Latest Work</h2>

                        <p class="section-subtitle">I'm looking to expand my portfolio while I'm on top and while I'm young.</p>

                        <span class="divider center"></span>
                    </div>
                    <!-- //.col-md-12 -->
                </div>
                <!-- //.row -->
                
                <!-- PORTFOLIO START -->
                <div class="portfolio">
                    <div class="row">
                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-1.jpg" class="zoom" title="Buzz Lightyear">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/25963987/Buzz-Lightyear" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Buzz Lightyear</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-1.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-2.jpg" class="zoom" title="Robosam 3">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/25344153/Robosam-3" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Robosam 3</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-2.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-3.jpg" class="zoom" title="Coke Man and Dog">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/25821381/Coke-Man-and-Dog" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Coke Man and Dog</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-3.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-4.jpg" class="zoom" title="Speed Projects">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/20195929/Speed-Projects" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Speed Projects</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-4.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-5.jpg" class="zoom" title="Wooden Rhinoceros Beetle">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/26043281/Wooden-Rhinoceros-Beetle" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Wooden Rhinoceros Beetle</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-5.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-6.jpg" class="zoom" title="The First Encounter">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/25505317/The-first-Encounter" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>The First Encounter</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-6.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-7.jpg" class="zoom" title="Dead Pool">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/25763797/DEADPOOL" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Dead Pool</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-7.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->

                        <div class="item col-sm-6 col-md-3">
                            <div class="project-wrapper">
                                <div class="project-link">
                                    <a href="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-8.jpg" class="zoom" title="Rebus II">
                                        <i class="icon-Full-Screen"></i>
                                    </a>

                                    <a href="https://www.behance.net/gallery/19401293/Rebus-2" target="_blank" class="external-link">
                                        <i class="icon-Link"></i>
                                    </a>
                                </div>
                                <!-- //.project-link -->

                                <div class="project-title">
                                    <h4>Rebus II</h4>
                                </div>
                                <!-- //.project-title -->

                                <img src="http://themes.lucky-roo.com/resume-cv/berg/HTML_Template/assets/images/portfolio/project-image-8.jpg" alt="" class="img-responsive">
                            </div>
                            <!-- //.project-wrapper -->
                        </div>
                        <!-- //.item -->
                    </div>
                    <!-- //.row -->
                </div>
                <!-- PORTFOLIO END -->
            </div>
            <!-- //.section-content -->
        </div>
        <!-- //.container-fluid -->
    </section>

CSS code

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


/*---------------------------------------------------------------------*/
/*  6.2. SECTION - PORTFOLIO
/*---------------------------------------------------------------------*/
#portfolio {
  position: relative;
  z-index: 5;
  background-color: #171717;
}

#portfolio .section-wrapper > .section-content {
  padding-bottom: 0px;
}

.portfolio {
  margin-top: 30px;
}

.portfolio .item {
  position: relative;
  padding: 0px;
  max-width: 100%;
}

.portfolio .item > .project-wrapper {
  position: relative;
  z-index: 5;
}

.portfolio .item > .project-wrapper:before {
  position: absolute;
  z-index: 10;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0);
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}

.portfolio .item > .project-wrapper:hover:before {
  background-color: rgba(0, 0, 0, 0.7);
}

.portfolio .item > .project-wrapper:hover > .project-link {
  opacity: 0.9;
}

.portfolio .item > .project-wrapper:hover > .project-link > a.zoom {
  left: 0;
}

.portfolio .item > .project-wrapper:hover > .project-link > a.external-link {
  left: 40px;
}

.portfolio .item > .project-wrapper:hover > .project-title > h4 {
  margin-top: 0px;
  opacity: 1;
}

.portfolio .item > .project-wrapper > .project-link {
  position: absolute;
  z-index: 20;
  top: 50%;
  left: 50%;
  width: 88px;
  height: 48px;
  margin-top: -48px;
  margin-left: -44px;
  opacity: 0;
}

.portfolio .item > .project-wrapper > .project-link > a {
  display: block;
  position: absolute;
  top: 0;
  width: 48px;
  height: 48px;
  line-height: 48px;
  color: #ffffff;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
}

.portfolio .item > .project-wrapper > .project-link > a.zoom {
  left: 40px;
  background-color: #2e2e2e;
}

.portfolio .item > .project-wrapper > .project-link > a.external-link {
  left: 0;
  background-color: #c80a48;
}

.portfolio .item > .project-wrapper > .project-title > h4 {
  display: block;
  position: absolute;
  z-index: 15;
  top: 50%;
  left: 0;
  width: 100%;
  height: 48px;
  line-height: 48px;
  margin-top: -48px;
  text-align: center;
  opacity: 0;
  -webkit-transition: all 0.4s ease-in-out;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.filterable-portfolio-nav {
  margin: 30px 0px 5px;
}

@media (max-width: 599px) {
  .filterable-portfolio-nav a {
    margin-bottom: 15px;
  }
}

                                    

Similar snippets

Bootstrap snippet bs4 beta gallery

bs4 beta gallery

View

Bootstrap snippet thumbnails gallery with overlays

thumbnails gallery with overlays

View

Bootstrap snippet Box gallery images

Box gallery images

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 29th 2016, 10:51

Views: 168