Cara membuat efek Rotasi+Shadow pada Gambar Blog

Diposting oleh kursi kantor bandung on Senin, 01 September 2014

Efek berikut ini anda tidak perlu menambahkan script jquery pada template blog anda, efek berikut ini cukup sederhana yaitu hanya menggunakan CSS. Untuk demonya sobat dapat melihat langsung live demonya di gambar di postingan ini. Ok berikut adalah...
LIVE DEMO :


Membuat Efek Rotasi pada Gambar Blog

1) Masuk ke dashboard blogger lalu klik Template
2) Cari tag penutup ]]></b:skin>
3) Pastekan CSS di bawah ini tepat di atas tag penutup ]]></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);
}
Untuk menerapkannya pada postingan blog sobat tinggal mengupload gambar yang sobat inginkan.

{ 0 komentar... read them below or add one }

Posting Komentar