Cara Mudah Membuat Gambar Berputar dan zoom saat di hover tanpa jQuery

Cara Mudah Membuat Gambar Berputar dan zoom saat di hover tanpa jQuery ( hanya dengan CSS ) - contohnya silahkan dilihat di gambar disamping ( cukup di hover ). Cara ini 100% tanpa menggunakan jQuery yang dapat mempengaruhi loading blog menjadi lambat.

berikut tutorialnya

1. Login ke blogger
2. masuk ke Template - Edit HTML
3. Cari kode ]]></b:skin>
4. Paste kode berikut tepat diatas kode no 3...

a img, img{-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}a img:hover, img:hover{border:2px solid; -webkit-border-top-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
border-top-left-radius: 20px;
border-bottom-right-radius: 20px;-o-transform:scale(1.2) rotate(360deg) translate(0px);-moz-transform:scale(1.2) rotate(360deg) translate(0px);-webkit-transform:scale(1.2) rotate(360deg) translate(0px);-o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;-webkit-transition:all 1.5s ease}

5. Setelah selesai, simpan template dan lihat hasilnya

Tweet