Cara Membuat Efek Rotasi + Shadow Pada Gambar Blog


Tanpa banyak basa-basi, berikut tutorialnya:
  • Masuk ke dashboard Blog
  • klik template > Edit HTML
  • Cari Tag penutup ]]></b:skin>
  • pastekan CSS berikut diatas ]]></b:skin>

 .post-body img{
border-radius: 2%;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.post-body img:hover{  transition: all 2s ease-in-out;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
z-index: 999;
box-shadow: 8px -6px 5px rgba(50, 50, 50, 0.75);
}

  • Selesai
  • save template
untuk melihat hasilnya, coba lihat gambar yang di upload pada postingan blog..

berikut contoh hasilnya:

Live Demo


Bagaimana? Keren kan?.. :D
jangan lupa commentnya...
Previous
Next Post »