Best 4 Portfolio Design Using CSS3

Already we have discussed a single portfolio design and here is the tutorial for best 4 Portfolio Design Using CSS3.

PORTFOLIO DESIGN – 1

[code type=html]

<div class=”outer”>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/1.JPG” />
<div class=”caption”>Business Card Design for Vydoha</div>
</div>
</div>

<div class=”outer”>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/2.JPG” />
<div class=”caption”>Business Card Design for Vydoha</div>
</div>
</div>

[/code]

 

[code type=css]

.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;

}
.inner
{
position:absolute;
float:left;
width: 300px;
overflow:hidden;
}
.caption
{
position: absolute;
bottom: -300px;
left: 300px;
height: 230px;
width: 270px;
background-color: #000;
color: #fff;
font-family:Verdana, Geneva, sans-serif;
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;
}
.outer:hover .caption
{
bottom: 0px;
left:0px;
transition:all 0.5s;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
}
[/code]

 

PORTFOLIO DESIGN – 2

[code type=html]
<div class=”outer outer1″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/1.JPG” class=”inner1″ />
<a class=”caption1″ href=”http://www.freezecoders.com”>x</a>
</div>
</div>

<div class=”outer outer1″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/2.JPG” class=”inner1″ />
<a class=”caption1″ href=”http://www.freezecoders.com”>x</a>
</div>
</div>

[/code]

 

[code type=css]

.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;

}
.inner
{
position:absolute;
float:left;
width: 300px;
overflow:hidden;
}

.caption1

{
position: absolute;
bottom: 50%;
left: 50%;

background-color: #000;
color: #fff;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 23px;
padding: 10px 15px;
margin: -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;

transform: scale(0, 0);
-webkit-transform: scale(0, 0);
-moz-transform: scale(0, 0);
-ms-transform: scale(0, 0);
-o-transform: scale(0, 0);
}

.outer1:hover .inner1
{
opacity:0.4;
}
.outer1:hover .caption1
{
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transform: scale(1.10, 1.10);
-webkit-transform: scale(1.10, 1.10);
-moz-transform: scale(1.10, 1.10);
-ms-transform: scale(1.10, 1.10);
-o-transform: scale(1.10, 1.10);
}
[/code]

 

 

 

PORTFOLIO DESIGN – 3

[code type=html]
<div class=”outer outer2″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/1.JPG” class=”inner2″ />
<div class=”caption2″ >Category1</div>
</div>
</div>

<div class=”outer outer2″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/2.JPG” class=”inner2″ />
<div class=”caption2″ >Category2</div>
</div>
</div>

[/code]

 

[code type=css]

.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;

}
.inner
{
position:absolute;
float:left;
width: 300px;
overflow:hidden;
}
.caption2
{
position: absolute;
bottom: 20px;
right: -120px;
background-color: #000;
color: #fff;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 23px;
padding: 10px 15px;
margin: -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;}

.outer2:hover .inner2
{
transform: scale(1.25, 1.25);
-webkit-transform: scale(1.25, 1.25);
-moz-transform: scale(1.25, 1.25);
-ms-transform: scale(1.25, 1.25);
-o-transform: scale(1.25, 1.25);

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
right: 200px;

}
.outer2:hover .caption2
{
right: 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;
}

[/code]

 

 

PORTFOLIO DESIGN – 4

[code type=html]

<div class=”outer outer3″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/1.JPG” class=”inner3″ />
<div class=”caption3″ >Category1</div>
</div>
</div>

<div class=”outer outer3″>
<div class=”inner”>
<img src=”http://byzerotechnologies.com/demo/rmedia1/images/print/2.JPG” class=”inner3″ />
<div class=”caption3″ >Category2</div>
</div>
</div>

[/code]

 

[code type=css]

.outer
{
float: left;
width: 300px;
margin: 0 16px;
height: 250px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;

}
.inner
{
position:absolute;
float:left;
width: 300px;
overflow:hidden;
}

.caption3
{
position: absolute;
bottom: 20px;
right: -120px;
background-color: #000;
color: #fff;
font-family:Verdana, Geneva, sans-serif;
font-size: 16px;
font-weight: 100;
line-height: 23px;
padding: 10px 15px;
margin: -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;

}

.outer3:hover .inner3
{

transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotateX(360deg);
-ms-transform: rotateX(360deg);
-o-transform: rotateX(360deg);

/*-moz-filter: sepia(100%);
-webkit-filter: sepia(100%);
-o-filter: sepia(100%);
-ms-filter: sepia(100%);
filter: sepia(100%);*/

transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
-ms-transition: all 0.5s;
-o-transition: all 0.5s;
right: 200px;

}
.outer3:hover .caption3
{
right: 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;
}

.inner3:after
{
transform: scale(1.25, 1.25);
-webkit-transform: scale(1.25, 1.25);
}

[/code]