Attractive Css Image Hover Effect Untuk Blogger

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" />

---

Atau

---

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

---

Atau

---

<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.