Menampilkan Gallery Gambar dengan Style Flip Halaman

Letakan kursor pada gambar kemudian Klik...


Foto by: Dahe Ugi

<style type="text/css">
.outer {margin:0 auto; position:absolute; right:0; bottom:0; width:400px; height:300px;}
.inner {width:400px; height:300px; position:absolute; left:0; top:0;
}
.p1 {width:0px; height:500px; position:absolute; left:400px; top:120px; overflow:hidden;
-webkit-transform-origin: 0 180px;
-moz-transform-origin: 0 180px;
-ms-transform-origin: 0 180px;
-o-transform-origin: 0 180px;
transform-origin: 0 180px;

-webkit-transform: rotate(53.14deg);
-moz-transform: rotate(53.14deg);
-ms-transform: rotate(53.14deg);
-o-transform: rotate(53.14deg);
transform: rotate(53.14deg);
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.p1 div {width:400px; height:300px; position:absolute; left:40px; top:100px;
-webkit-transform: rotate(53.14deg);
-moz-transform: rotate(53.14deg);
-ms-transform: rotate(53.14deg);
-o-transform: rotate(53.14deg);
transform: rotate(53.14deg);
}

.p2 {width:0px; height:500px; position:absolute; left:400px; top:120px; overflow:hidden;
-webkit-transform-origin: 0 180px;
-moz-transform-origin: 0 180px;
-ms-transform-origin: 0 180px;
-o-transform-origin: 0 180px;
transform-origin: 0 180px;

-webkit-transform: rotate(53.14deg);
-moz-transform: rotate(53.14deg);
-ms-transform: rotate(53.14deg);
-o-transform: rotate(53.14deg);
transform: rotate(53.14deg);
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}
.p2 div {width:400px; height:300px; position:absolute; left:-440px; top:100px;
-webkit-transform: rotate(-53.14deg);
-moz-transform: rotate(-53.14deg);
-ms-transform: rotate(-53.14deg);
-o-transform: rotate(-53.14deg);
transform: rotate(-53.14deg);
-webkit-transition: 1.5s ease-in-out;
-moz-transition: 1.5s ease-in-out;
-ms-transition: 1.5s ease-in-out;
-o-transition: 1.5s ease-in-out;
transition: 1.5s ease-in-out;
}

.click a:hover .outer .p1 {width:480px; left:-176px; top:-648px;}
.click a:hover .outer .p2 {width:480px; left:113px; top:-264px;}
.click a:hover .outer .p2 div {left:40px; top:100px;}

.frame {position:relative; width:400px; height:300px; margin:200px auto 0 auto; z-index:500;}

.frame a {display:block; outline:0; position: absolute; left:10px; top:10px; width: 400px; height: 300px;}

.click a:active, .click a:focus {z-index: 20;}
.click a:active + a, .click a:focus + a {z-index: 30;}
.click a#a1 {z-index: 20;}
.click a#a11:active, .click a#a11:focus {z-index:10;}

.hover a:hover {z-index: 20;}
.hover a:hover + a {z-index: 30;}
.hover a#a1 {z-index: 20;}
.hover a#a11:hover {z-index:10;}

.poststart ul li {
background-image : url();
background-repeat : no-repeat;
background-position : 0 10px;
margin : 0px 0px 0 0px;
padding : 0 0 0 0;

}
</style>

<div id="info">
<div class="frame click">

<a id='a1' href='#x' tabindex="1">
<div class="outer">
<div class="inner"><img src="caprt3a/p1.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p1b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p2.jpg" alt="" /></div></div>
</div>
</a>

<a id='a2' href='#x' tabindex="2">
<div class="outer">
<div class="inner"><img src="caprt3a/p2.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p2b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p3.jpg" alt="" /></div></div>
</div>
</a>

<a id='a3' href='#x' tabindex="3">
<div class="outer">
<div class="inner"><img src="caprt3a/p3.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p3b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p4.jpg" alt="" /></div></div>
</div>
</a>

<a id='a4' href='#x' tabindex="4">
<div class="outer">
<div class="inner"><img src="caprt3a/p4.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p4b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p5.jpg" alt="" /></div></div>
</div>
</a>

<a id='a5' href='#x' tabindex="5">
<div class="outer">
<div class="inner"><img src="caprt3a/p5.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p5b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p6.jpg" alt="" /></div></div>
</div>
</a>

<a id='a6' href='#x' tabindex="6">
<div class="outer">
<div class="inner"><img src="caprt3a/p6.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p6b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p7.jpg" alt="" /></div></div>
</div>
</a>

<a id='a7' href='#x' tabindex="7">
<div class="outer">
<div class="inner"><img src="caprt3a/p7.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p7b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p8.jpg" alt="" /></div></div>
</div>
</a>

<a id='a8' href='#x' tabindex="8">
<div class="outer">
<div class="inner"><img src="caprt3a/p8.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p8b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p9.jpg" alt="" /></div></div>
</div>
</a>

<a id='a9' href='#x' tabindex="9">
<div class="outer">
<div class="inner"><img src="caprt3a/p9.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p9b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p10.jpg" alt="" /></div></div>
</div>
</a>

<a id='a10' href='#x' tabindex="10">
<div class="outer">
<div class="inner"><img src="caprt3a/p10.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p10b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p11.jpg" alt="" /></div></div>
</div>
</a>

<a id='a11' href='#x' tabindex="11">
<div class="outer">
<div class="inner"><img src="caprt3a/p11.jpg" alt="" /></div>
<div class="p1"><div><img src="caprt3a/p11b.jpg" alt="" /></div></div>
<div class="p2"><div><img src="caprt3a/p1.jpg" alt="" /></div></div>
</div>
</a>

</div>
</div> <!-- end of info -->