Give Transitions Effect for Plipeo Widget

Melanjutkan meng-snippet kode CSS milik plipeo widget! Sobat yang belum membaca versi pendahulu, harap dibaca dulu Snippet CSS Code Widget Plipeo. Disana Koben memberi tahu bagaimana cara memberikan efek border radius. Sekarang menambahkan effect transition agar tampak membesar pada gambar kala cursor diarahkan ;) Contoh bisa dilihat pada home page blog ini, sorotlah coba disana.
Mudah sekali caranya membikin itu semua. Pada postingan sebelumnya, sobat sudah memliki unik id CSS kan? Unique ID = daaebfdfececfaa Tinggal menyisipkan kembali coded CSS3 kedalam syntax <style type="text/css">
Berikut contoh:

Markup CSS Border Only

<style type="text/css">
.daaebfdfececfaa {
background: #555;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
</style>Tambahkan attribute CSS-3 berikut kedalamnya

Markup CSS Border + Transition

<style type="text/css">
.daaebfdfececfaa {
background: #555;
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
}
.daaebfdfececfaa td:hover {
transition: all 0.3s;
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3)
}
</style>Keterangan:

• daaebfdfececfaa
Unique-ID kalian.
• Kode warna biru.
Coded border radius effect.
• Kode warna hijau.
Coded transitions effect.

Untuk melihat properti apa saja dari CSS3 Transitions sobat bisa meluncur W3 School CSS3 Transitions. Silahkan tambahkan atribut CSS3 sesuai kemauan kalian. Semoga bermanfaat :)
Happy transitions \m/