Create Nuts (Polaroid Photo Gallery) With CSS Transitions

Baiklah Pada kesempatan kali ini saya akan menunjukkan kepada sobat sekalian bagaimana CSS3 dan mengubah WebKit Transisi dengan menambah beberapa effect pada image. seperti pada contoh screenshoot diatas..

HTML::

<div class="photo-album">
       
        <h1><span>akaUTta <abbr title="and" class="amp">&amp;</abbr> Collect Photo Gallery</span></h1>
       
        <a href="#" class="large polaroid img1"><img src="http://bbupbipchuelfxtion.files.wordpress.com/2011/03/korean_asian_girl_hair_style_05.jpg" alt="">Korean Asian Girl Name Yoona</a>
        <a href="#" class="polaroid img2"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLW_y1mtl0hmhEWsEtIXkUZ8IbFR2EjkLSY4Mz0mq3iM5GoLFwxsp8K7vfEhH5reRVaKhWPbB1hquLZwFGXwUl7i3BYZCstNMXRFDDAqqLE10ibOnCRouZM77N8LGFqjZ8o2Gq8otx34/s1600/asian-girl-hot.jpg" alt="">Girl Korean & Car</a>
        <a href="#" class="small polaroid img3"><img src="http://i2.asntown.net/h3/Girls/9/photo-single-asians/pretty-asian-girls-on-social-network-site01.jpg" alt="">pretty asian girls on social network</a>
       
        <a href="#" class="medium polaroid img4"><img src="http://upload.wikimedia.org/wikipedia/commons/1/14/Asian_woman_shushing.jpg" alt="">tall asian women</a>
       
        <a href="#" class="polaroid img5"><img src="http://i2.asntown.net/ha/girls1/12-5-10/cute-asian-girl41.jpg" alt="">cute asian girl</a>
       
       
        <a href="#" class="polaroid img6"><img src="http://desmond.imageshack.us/Himg132/scaled.php?server=132&filename=sasaki021301375x500.jpg&res=landing" alt="">The Really Cute Asian Girl ❤ Nozomi</a>
       
        <a href="#" class="polaroid img7"><img src="http://try-iphone.com/live-wallpapers/wp-content/uploads/2012/04/Asian-Girl-1222-h.jpg" alt="">Hot Girls</a>
        <a href="#" class="small polaroid img8"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhChEqozc6at5lgEtxyYGUZgkmekZ6fOluJbY2Caqj6_KslO3JurRU-MXHvv1wMnn3a7i0yK4kJW8AXCDIZGrxsSzLuMIoPJVWlnPdIoNQVAkmH2cIqJvndzVY8k1TVOlqSefvNLfEQKSE/s1600/ulzzang.jpg" alt="">Asian cute girls WITHOUT Make-Up</a>
        <a href="#" class="medium polaroid img9"><img src="http://dealofhair.com/wp-content/uploads/2012/06/afccc7edf782a74a4adf892bb84699883.jpg" alt="">Cute Long Curly with Brown Color for Asian Girl</a>
        <a href="#" class="polaroid img10"><img src="http://i2.asntown.net/h3/Girls/10/cute-jean-fashion/pretty-asian-girls-dating-online-love02.jpg" alt="">pretty asian girls dating online love</a>
        <a href="#" class="small polaroid img11"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8mNXfgPXCQtPdkCPqyp4vALVseMYKmRWsTwD8X1ZHr8toafDIP4RYcBw5fdTs7PBOtLitgpWOS6kWTA44Rcm20aktRzO55xYfsF14wt7Ro4rLQHE29iKJjNmTQFv_IeyFpLqoKV7NO5TF/s1600/sexy_asian_girl.jpg" alt="">Beautiful Asian Girls</a>
        <a href="#" class="small polaroid img12"><img src="http://3.bp.blogspot.com/-g6B5eBoYBr0/TeJQx4NvjAI/AAAAAAAAH3I/6XG9Zsj9ifE/s1600/asian-girls-02.jpg" alt="">Most Beautiful Asian Girls Collection</a>
        <a href="#" class="small polaroid img13"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMjPM05PBJhcHYh3ROMh2zLhyphenhyphenQ95zpS5p97bQdXbk4NHPszH2AYn-XGWv4LbCnurZnLiPMEY0wor_uQN-ymESphGaxieLZ-VJqrNGEhuVHb0n1PWu6qWT52GxGsm0A2sa0dStWRHjLgxk/s400/Cute+Asian+Girl+hairstyles+2.jpg" alt="">Cute Asian Girls</a>
        <a href="#" class="small polaroid img14"><img src="http://profile.ak.fbcdn.net/hprofile-ak-snc4/161339_100001961607708_3182594_n.jpg" alt="">Cute Girls</a>
        <a href="#" class="polaroid img15"><img src="http://img.chinasmack.com/www/wp-content/uploads/2009/02/wink-cute-asian-girl-260x380.jpg" alt="">Wink Cute Asian Girl From Tianya</a>
    </div>

CSS::

<style type="text/css">
    .amp {
        font-family:Garamond,Baskerville,Georgia,serif !important;
        font-style:italic;
        font-weight:normal;
        border: none;
    }
   
    a.polaroid {
        display: block;
        text-decoration: none;
        color: #333;
        padding: 10px 10px 20px 10px;
        width: 150px;
        border: 1px solid #BFBFBF;
        background-color: white;
        z-index: 2;
        font-size: 0.7em;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -webkit-transition: -webkit-transform 0.5s ease-in;
    }
    a.polaroid:hover,
    a.polaroid:focus,
    a.polaroid:active {
        z-index: 999;
        border-color: #6A6A6A;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .polaroid img {
        margin: 0 0 15px;
        width: 150px;
        height: 150px;
    }
   
    a img {
        border: none;
        display: block;
    }
   
    .photo-album {
        position: relative;
        width: 80%;
        margin: 0 auto;
        max-width: 70em;
        height: 450px;
        margin-top: 5em;
        min-width: 800px;
        max-width: 900px;
    }
    .photo-album .polaroid {
        position: absolute;
    }
    .photo-album h1 {
        position: absolute;
        z-index: 5;
        top: 150px;
        text-align: center;
        width: 100%;
        line-height: 1.9;
    }
    .photo-album h1 span {
        background-color: white;
        font-family: "Helvetica Neue",Arial,Helvetica,sans-serif;
        padding: 0.4em 0.8em 0.3em 0.8em;
        -webkit-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        -moz-box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        box-shadow: 2px 2px 4px rgba(0,0, 0, 0.3);
        border: 1px solid #6A6A6A;
    }
    .photo-album .small {
        width: 75px;
        padding: 6px 6px 12px 6px;
        font-size: 0.6em;
    }
    .photo-album .small img {
        width: 75px;
        height: 75px;
    }
    .photo-album .medium {
        width: 200px;
        padding: 13px 13px 26px 13px;
        font-size: 0.8em;
    }
    .photo-album .medium img {
        width: 200px;
        height: 200px;
    }
    .photo-album .large {
        width: 300px;
        padding: 20px 20px 30px 20px;
        font-size: 1em;
    }
    .photo-album .large img {
        width: 300px;
        height: 300px;
    }
    .photo-album .img1 {
        bottom: 10px;
        right: 365px;
        -webkit-transform: rotate(10deg);
        -moz-transform: rotate(10deg);
        transform: rotate(10deg);
    }
    .photo-album .img2 {
        top: 50px;
        right: 20px;
        -webkit-transform: rotate(-4deg);
        -moz-transform: rotate(-4deg);
        transform: rotate(-4deg);
    }
    .photo-album .img3 {
        left: 400px;
        top: 0;
        -webkit-transform: rotate(-5deg);
        -moz-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }
    .photo-album .img4 {
        top: 10px;
        left: 495px;
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }
    .photo-album .img5 {
        bottom: 0;
        right: 0;
        -webkit-transform: rotate(1deg);
        -moz-transform: rotate(1deg);
        transform: rotate(1deg);
    }
    .photo-album .img6 {
        bottom: 10px;
        right: 156px;
        -webkit-transform: rotate(6deg);
        -moz-transform: rotate(6deg);
        transform: rotate(6deg);
    }
    .photo-album .img7 {
        bottom:0;
        left:400px;
        -webkit-transform: rotate(-10deg);
        -moz-transform: rotate(-10deg);
        transform: rotate(-10deg);
    }
    .photo-album .img8 {
        bottom: -20px;
        left: 700px;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    .photo-album .img9 {
        bottom: 0;
        left: 0;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    .photo-album .img10 {
        top: 0;
        left: 20px;
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        transform: rotate(8deg);
    }
    .photo-album .img11 {
        top: 0;
        right: 0;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
    .photo-album .img12 {
        top: 0;
        left: 680px;
        -webkit-transform: rotate(18deg);
        -moz-transform: rotate(18deg);
        transform: rotate(18deg);
    }
    .photo-album .img13 {
        bottom: -20px;
        right: 630px;
        -webkit-transform: rotate(4deg);
        -moz-transform: rotate(4deg);
        transform: rotate(4deg);
    }
    .photo-album .img14 {
        top: 90px;
        left: 430px;
        -webkit-transform: rotate(15deg);
        -moz-transform: rotate(15deg);
        transform: rotate(15deg);
    }
    .photo-album .img15 {
        left:176px;
        top:20px;
        -webkit-transform: rotate(-8deg);
        -moz-transform: rotate(-8deg);
        transform: rotate(-8deg);
    }
   
    a:hover,
    a:focus {
        z-index: 5;
    }
    </style>

Dan untuk demonya silahkan klik disini..

Please rate this article: