Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Efek Gambar Peel Back Dengan CSS3

Efek Gambar Peel Back Dengan CSS3
Efek Gambar Peel Back Dengan CSS3 – merupakan efek gambar dimana saat mouse menyentuh gambar akan menampilkan efek hover seperti slide out yang berjalan secara mulus untuk menampilkan gambar kedua yang berada dibelakangnya. Efek animasi CSS3 ini berjalan secara halus sehinga lebih jelas terlihat saat onmouseover gambar akan terkesan menjadi lebih cantik. Hasilnya adalah sederhana namun ramping "Sebelum dan Sesudah" efek hover gambar. Dengan sedikit menambahkan kode CSS pada template blog kemudian menerapkannya dengan mememanggil kode tersebut kedalam postingan maka tidak akan terlalu sulit untuk membuat posting blog dan membuat variatif gambar dipostingan blog agar tampil lebih cantik. Cara pemasangannya pun sangat mudah dan dalam waktu yang sangat cepat, berikut adalah tutorial cara membuat Efek Gambar Peel Back Dengan CSS3 di postingan blog:

1. Login ke akun blogger.
2. Klik Template > Edit HTML.
3. Cari kode ]]></b:skin> gunakan CTRL+F untuk mempermudah pencarian.
4. Taruh kode berikut ini tepat diatas kode ]]></b:skin>
a.nowandthen{
position:relative;
display: block;
overflow:hidden;
cursor: pointer;
width: 550px;
height: 434px;
}
a.nowandthen img{
position:absolute;
left:0;
top:0;
width: 100%;
height: 100%;
-moz-transition: all 0.5s ease;
-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);
}
a.nowandthen img:nth-of-type(2){z-index: 1;}
a.nowandthen:hover img:nth-of-type(1){clip: rect(0,0,434px,0);
opacity: 0;
}
a.nowandthen.alt{ width: 300px;height: 354px;}
a.nowandthen.alt img{clip: rect(0,300px,354px,0);}
a.nowandthen.alt:hover img:nth-of-type(1){clip: rect(0,0,354px,0);}
5. Untuk memanggil kode diatas muncul di posting blog, silahkan Buat Entri Baru menggunakan mode HTML kemudian masukan kode diberikut ini kedalam halaman posting atau bisa juga di sidebar blog.
<a class="nowandthen">
 <img alt="faceblog evolutions" src="http://1.bp.blogspot.com/-g8yisZRKWuE/UVrlSkR-qrI/AAAAAAAAD_E/YAey1keHR3s/s1600/peel-back-1a.jpg"/>
 <img alt="faceblog evolutions" src="http://1.bp.blogspot.com/-punOpruc-wI/UVrlU2HnLZI/AAAAAAAAD_U/cWJwyrbZ7aM/s1600/peel-back1b.jpg"/>
</a>

DEMO:

Efek Gambar Peel Back Dengan CSS3 Efek Gambar Peel Back Dengan CSS3

Berlangganan artikel via email

14 Response to "Efek Gambar Peel Back Dengan CSS3"

hebat banget ya efeknya bagus banget dehhh

Balas

mau belajar dehh efeknya mantapppp

Balas

wah mantap banget nih effeck terimakasih banyak mas, sudah berbagi pada kami

Balas

tutorialnya sangat berguna sekali sobat
sangat membantu
terima kasih sudah berbagi

Balas

Keren nih mas... Izin dibawa pulang ya buat oleh2....
Tq sudah berbagi nih...

Balas

duhhh...demonya mas. hahahah

Balas

hahah emonya barca gak enak banget , tapi keren gan di coba dulu deh

Balas

saya cukup tertarik gan

Balas

hahahahhaa.. keren bnget dah.. Pokok'nya TOP.. :D

Balas

iya ini memang keren dan hasilnya memuaskan juga sobat

Balas

mohon maaf sekali mbak soalnya belom dapet ide buat bikin demo yang lebih baik lagi :D
hehe

Balas

mohon maaf kalo mas penggemar barca, gak sengaja saya bikin demo seperti itu :)
hehe

Balas

ini utk org kreatif

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Efek Gambar Peel Back Dengan CSS3" ini bermanfaat, share ke jejaring sosial.
Konversi Kode