Design of a portfolio page is an important thing. Portfolio design is like sering our designs to viewer in our best way. Here is the simple portfolio design using css3.
best-portfolio-design-using-css3
How This Portfolio Design Works
portfolio-design-using-css3
[code type=html]
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/1.JPG” />
<div class=”caption”>Marriage Invitation Card for Mr. Siva kumar</div>
</div>
</div>
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/2.JPG” />
<div class=”caption”>Business Card Design for Vydoha</div>
</div>
</div>
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/3.JPG” />
<div class=”caption”>Pamlet Design for Pedigree</div>
</div>
</div>
[/code]
[code type=css]
.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
}
.inner
{
position:absolute;
float:left;
width: 370px;
overflow:hidden;
}
.caption
{
position: absolute;
bottom: -170px;
height: 100px;
width: 270px;
background-color: #000;
color: #fff;
font-size: 16px;
font-weight: 100;
line-height: 23px;
padding: 10px 15px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
opacity: 0.6;
}
.inner:hover .caption
{
bottom: 0px;
transition:all 0.5s;
}
[/code]
[code type=html]
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Best Portfolio Design Using CSS3</title>
<style type=”text/css”>
.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
}
.inner
{
position:absolute;
float:left;
width: 370px;
overflow:hidden;
}
.caption
{
position: absolute;
bottom: -170px;
height: 100px;
width: 270px;
background-color: #000;
color: #fff;
font-size: 16px;
font-weight: 100;
line-height: 23px;
padding: 10px 15px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
opacity: 0.6;
}
.inner:hover .caption
{
bottom: 0px;
transition:all 0.5s;
}
</style>
</head>
<body>
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/1.JPG” />
<div class=”caption”>Marriage Invitation Card for <br />
Mr. Siva kumar</div>
</div>
</div>
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/2.JPG” />
<div class=”caption”>Business Card Design for Vydoha</div>
</div>
</div>
<div class=”outer”>
<div class=”inner”>
<img src=”http://demo.freezecoders.com/demos/image/3.JPG” />
<div class=”caption”>Pamlet Design for Pedigree</div>
</div>
</div>
</body>
</html>
[/code]
veeeeeeeeeeeeeeery NICE code
thank you.
HiPrasad – I just finnished adding your tables to my wordpress site – and been going through your tutorials – they really awesome, not alot of code and easy to implement – especially for someone that is not YET an expert – thank you so much 🙂