Animasi Gambar di CSS

dengan flip pada CSS3 kita dapat membuat animasi seperti gambar dibawah ini

    Pake CSS loh itu... Jangan liat orangnya yang lagi jongkok itu :-), cuma contoh kok...

Pasti pengen tahu caranya, Oke langsung caranya aja:
1. seperti biasa tambahkan widget di tata letak / page element
2. pilih javascript
3. copy seluruh code dibawah ini

<style type="text/css">

a.nowandthen{

position:relative;

display: block;

overflow:hidden;

cursor: pointer;

width: 650px; /* atur lebar tempat gambar */

height: 434px; /* atur tinggi tempat gambar */

}

a.nowandthen img{

position:absolute;

left:0;

top:0;

width: 100%; /* lebar gambar sebenarnya disini biarkan 100% saja */

height: 100%; /* tinggi gambar sebenarnya disini biarkan 100% saja */

-moz-transition: all 0.5s ease; /* enable transition */

-webkit-transition: all 0.5s ease;

-o-transition: all 0.5s ease;

-ms-transition: all 0.5s ease;

transition: all 0.5s ease;

z-index: 2;

clip: rect(0,650px,434px,0); /* clip values should be rect(0,image_width,image_height,0) */

}

a.nowandthen img:nth-of-type(2){ /* hide "after" image beneath "before" so it's initially out of view */

z-index: 1;

}

a.nowandthen:hover img:nth-of-type(1){ /* clip "before" image to reveal "after" */

clip: rect(0,0,434px,0); /* clip values should be rect(0,0,image_height,0) */

opacity: 0;

}

</style>

sesuaikan lembar di CSS sama dengan lebar gambar
4. Trus yang ini untuk link gambar kamu, letakkan dibawah kode diatas

<a class="nowandthen">

<img src="http://img526.imageshack.us/img526/8063/beforejt.jpg" alt="">

<img src="http://img52.imageshack.us/img52/75/afteruc.jpg" alt="">

</a>

ganti yang warna merah dengan link lokasi gambar kamu
5. Simpan
6. Letakkan ditempat yang kamu sukai

Untuk lebih jelasnya silahkan langsung ke sumbernya saja
http://www.dynamicdrive.com/style/csslibrary/item/before_and_after_peel_back_image/

Share on Google Plus

About Unknown

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.