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

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

<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>

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


/*---------------------------------------------------------------------*/
/*  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;
  }
}

                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Apr 29th 2016, 10:51

Views: 154