Attractive Css Image Hover Effect Untuk Blogger Adalah salah satu cara terbaik untuk mempercantik tampilan gambar yang ada di blog Anda.Sebelumnya kita juga pernah membahas berbagai effect pada gambar di antaranya Membuat Gambar Bergetar Menggunakan jQuery. Dengan penerapan Attractive Css Image Hover Effect Untuk Blogger maka Anda telah membuat gambar Anda menjadi lebih menarik, sehingga Anda dapat menambahkannya di setiap postingan Anda.

Effect gambar ini sama sekali tidak memberatkan blog atau tidak membuat loading menjadi lama karna kita hanya menggunakan CSS.
Untuk cara menambahkan effect ini pada gambar kita hanya perlu melakukan dua langkah mudah, yaitu menambahkan css pada template dan pada postingan blog kita. Sebelum kita tau cara membuatnya lebih baik kita lihat dulu demo yang telah saya persiapkan untuk Anda di bawah ini agar Anda mengerti effect yang kita maksud. Silahkan arahkan cursor Anda pada gambar, dan lihat effectnya pada gambar tersebut.


Demo




Kode yang di gunakan untuk membuat

Berikut ini adalah kode yang di gunakan untuk membuat effect gambar seperti di atas. Anda dapat merubah kode CSS sesuai keinginan Anda.


CSS



.OWeffect {
-webkit-transition:  -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
padding: 5px 5px 5px 5px;
-webkit-transform:  rotate(+2deg);
-moz-transform: rotate(+2deg);
}
.OWeffect:hover {
-webkit-box-shadow:  0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-webkit-transform:  rotate(-1deg);
-moz-transform: rotate(-1deg);
}


POST


Berikut ini adalah kode untuk memanggil kode CSS di atas. Pada saat membuat atau mengedit postingan letakkan script kode berikut untu memanggail gambar Attractive Css Image Hover Effect.


<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" />




<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" />




<img class="OWeffect"
src="https://code-otowebsite.googlecode.com/svn/trunk/siang-malam.jpg" width="320" height="230" />

Perhatikan kode yang telah di block di atas, kode tersebut bisa Anda ganti sesuai keinginan Anda.


Dari Meja Editor!
Saya rasa cukup sekian untuk kali ini, jika ada pertanyaan tentang artikel di atas silahkan lemparkan pertanyaan Anda di komentar Saya akan berusaha secepat mungkin untuk membalas dan membantu Anda.

Poskan Komentar Blogger Disqus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top