A Pen by Dzullfikar Adi Putra.

A-Pen-by-Dzullfikar-Adi-Putra.markdown

A Pen by Dzullfikar Adi Putra

A Pen by Dzullfikar Adi Putra on CodePen.

License.

index.html

<div id="test-body">

<div class="col-lg-4 portfolio-list">
  <a href="single-portfolio.html">
    <div class="portfolio-photo">
      <img src="http://cdn4.blackenterprise.com/wp-content/blogs.dir/1/files/2011/10/past-due-house-350x250.jpg" alt="..."/>		
    </div>			  
    <div class="caption">
      <h2 class="portfolio-title">Project Papa Mama the Series</h2>
    	<p class="portfolio-client">PT. Dirgantara Indonesia</p>
    </div>
  </a>
</div>
  
<div class="col-lg-4 portfolio-list">
  <a href="single-portfolio.html">
    <div class="portfolio-photo">
      <img src=" http://cdn4.blackenterprise.com/wp-content/blogs.dir/1/files/2011/10/home-350x250.jpg" alt="..."/>		
    </div>			  
    <div class="caption">
      <h2 class="portfolio-title">Project Ultra Super Cool 2</h2>
    	<p class="portfolio-client">Denver Study Co.ltd</p>
    </div>
  </a>
</div>  
</div>
  
 

style.css

body{
  padding: 50px 20px;
  background: #040404;
}

.portfolio-client, .portfolio-date, .portfolio-title{
	text-transform: uppercase;
	font-family: 'Yanone Kaffeesatz', sans-serif;
  color: #777;
}

.portfolio-list{
  width: 350px;
	height: 250px;
	margin-bottom: 30px;
  overflow: hidden;
  float:left;
  margin-right: 20px;
}

.portfolio-list a{
  text-decoration:none;
}

.portfolio-list div{
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}

.portfolio-list:hover div{
	position: relative;
	text-decoration: none;
	-webkit-transform: translate(0,-70px);
	-moz-transform: translate(0,-70px);
	-ms-transform: translate(0,-70px);
	-o-transform: translate(0,-70px);
}

.portfolio-list .caption{
	background : #fff;
	padding: 10px 20px;
	height: 70px;
  margin-top: -5px;
}


.portfolio-list h2.portfolio-title{
	margin: 0;
	font-size: 26px;
}

.portfolio-list p.portfolio-client{
	margin: 0;
}