Pada kesempatan kali ini saya akan mencoba membagikan pengetahuan saya, tentang cara membuat efect hover dengan bayangan / shadow pada gambar atau postingan blog, Dengan memberikan efek pada sebuah gambar merupakan salah satu cara blogger untuk mendesain dan mempercantik tampilan halaman mereka.
Tujuan membuat efek pada gambar, biasanya untuk menarik perhatian pengunjung blog, supaya lebih betah dan sering mampir ke blog kita. Dengan cara menambahkan efek Hover + bayangan tersebut pada blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda.
Efek gambar ini akan terlihat lebih jelas dan lebih cantik lagi apabila kursor mouse di arahkan ke gambar pada postingan anda.

Cara membuat efek Hover + Shadow di post blog.
1. Login ke akun blogger sobat
2. Klik Template » Edit HTML
3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>
4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.post-body img{background:#FFF;/* background color around the image */
padding:15px;/* The Space Between Border and Image */
border-radius:50% 0;/* Rounded border */
box-shadow:0 0 15px #000;/* Shadow */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s}
.post-body img:hover{border-radius:0;/* This removes the border roundness (value 0) */
-moz-transition:all 1s;-webkit-transition:all 1s;-o-transition:all 1s;cursor:pointer}

5. Kemudian simpan template sobat.

Cara  ini, berguna untuk membuat semua gambar yang berada di dalam postingan blog dengan secara otomatis mempunyai efek shadow, jadi anda tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual.

Nah, demikianlah tentang cara menambahkan efek hover + shadow pada gambar dan selamat mencoba dan semoga bermanfaat

Jangan lupa selalu share artikel di http://imahkudesain.blogspot.com