Bootstrap snippet: Porfolio work

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



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

Porfolio work

Dey-Dey
  Apr 29th, 10:51
38 Views