Foundation zurb snippet: Simple porfolio

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



<div class="row"> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/1/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/2/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/3/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> </div> <div class="row"> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/4/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/5/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> <div class="large-4 columns"> <div class="portfolio-box"> <img src="http://lorempixel.com/300/200/nature/6/" class="img-responsive" alt=""> <a href="#"> <p>View detail</p> </a> </div> </div> </div>
body{ margin-top:20px; background:#eee; } .img-responsive{ width:100%; height:auto; } .portfolio-box{ position: relative; overflow: hidden; margin-bottom: 50px; } .portfolio-box a{ position: absolute; width: 100%; height: 100%; left: 0; top: 0; display: block; } .portfolio-box a p{ width: 100%; position: absolute; left: 0; bottom:-100%; margin: 0; text-align: center; font-size: 18px; color:#fff; padding: 10px; background-color: rgba(0,0,0,0.3); transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } .portfolio-box:hover a p{ bottom: 0; }
Dey-Dey

Simple porfolio

Dey-Dey
  May 27th, 10:19
57 Views