Efek hover pada gambar adalah sebuah css yang diperintahkan untuk membuat gambar yang ada pada postingan bila dilewati cursor akan bergerak sesuai efek yang kita terapkan
Ada banyak efek hover yang bisa digunakan.tentunya trik ini tujuan utama adalah membuat postingan terasa hidup dan membuat pengujubg nyaman.
Dibawah ini salah satu efek hover yang bisa kita terapkan dibking.
Berikut kode dan cara pembuatanya;
.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
Cara pembuatan:
==>> masuk dasbor blog
==> cari menu template --> EDIT HTML
==> klik kanan pada kolom HTML pilih expand widget
==> cari kode (.post img)atau (.post img:hover) setelah jetemu ganti dengan kode diatas.(gunxakan CTL F untuk mempermudah pencarian).
Jika belum ada kode tersebut silahkan letakkan diatas kode
(]]></b:skin>)
==> simpan template
Ada baiknya sebelum mencoba cara ini backup dulu template,untuk memudakan jika bosan atau mengalami kegagalan.
Ada banyak efek hover yang bisa digunakan.tentunya trik ini tujuan utama adalah membuat postingan terasa hidup dan membuat pengujubg nyaman.
Dibawah ini salah satu efek hover yang bisa kita terapkan dibking.
Berikut kode dan cara pembuatanya;
.post img{
transition:all 1.2s ease-out;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}
.post img:hover {
z-index:99;
transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-o-transform:rotate(-10deg) scale(1.4) translate(5px,-3px);
-moz-transform:rotate(360deg) scale(2) translate(1px,-3px);
-webkit-transform:rotate(30deg) scale(2) translate(10px,-3px);
box-shadow: 0 3px 6px rgba(0,0,0,.5);
}
Cara pembuatan:
==>> masuk dasbor blog
==> cari menu template --> EDIT HTML
==> klik kanan pada kolom HTML pilih expand widget
==> cari kode (.post img)atau (.post img:hover) setelah jetemu ganti dengan kode diatas.(gunxakan CTL F untuk mempermudah pencarian).
Jika belum ada kode tersebut silahkan letakkan diatas kode
(]]></b:skin>)
==> simpan template
Ada baiknya sebelum mencoba cara ini backup dulu template,untuk memudakan jika bosan atau mengalami kegagalan.
Terimakasih Anda telah membaca tulisan / artikel di atas tentang :
Judul: membuat efek hover gambar berputar dipostingan blog
Rating: 100% based on 99998 ratings. **9 user reviews.
Ditulis Oleh supryplasadewa
Semoga informasi mengenai membuat efek hover gambar berputar dipostingan blog bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda saya tunggu di kolom bagian bawah ini.
Judul: membuat efek hover gambar berputar dipostingan blog
Rating: 100% based on 99998 ratings. **9 user reviews.
Ditulis Oleh supryplasadewa
Semoga informasi mengenai membuat efek hover gambar berputar dipostingan blog bisa memberikan manfaat bagi Anda. Jangan lupa Komentar Anda saya tunggu di kolom bagian bawah ini.
0 Response to "membuat efek hover gambar berputar dipostingan blog"
Post a Comment