Portfolio Design Using CSS3

By | August 20, 2013

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


best-portfolio-design-using-css3

How This Portfolio Design Works

portfolio-design-using-css3

portfolio-design-using-css3

 

HTML Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>

 

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
.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;
}

 

Full Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<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>

2 thoughts on “Portfolio Design Using CSS3

  1. mommaroodles

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

areosystyle-knowledgeless