Baiklah sobat pada kesempatan ini seocips akan membagikan tentang cara membuat efect hover dengan bayangan / shadow pada gambar atau postingan blog, dan untuk efek kali ini kerenlah menurut kami. Dengan memberikan efek pada gambar merupakan salah satu cara blogger untuk mendesain dan mempercantik tampilan halaman mereka.

Tujuan membuat efek seperti ini biasanya untuk menarik perhatian pengunjung blog supaya lebih betah dan sering mampir ke blog kita. Dengan cara menambahkan efek Hover + bayangan tersebut di blog anda akan memungkinkan untuk anda mempunyai pengunjung tetap karena tidak jenuh dengan tampilan blog anda.

Efek ini akan terlihat lebih jelas dan lebih cantik lagih jika kursor mouse di arahkan ke gambar pada postingan anda. Oh iya berbicara soal efek gambar sebelumnya juga kami telah membagikan efek zoom berputar pada gambar, Efek Marquee pada gambar, efek gambar dengan deskripsinya, dan juga yang tidak kalah kerennya adalah membuat animasi hover + deskripsi gambar.

Live Demo Efek Hover + Shadow Pada Gambar

Nah untuk demonya adalah gambar dibawah ini, silahkan arahkan kursor mouse ke gambarnya.


Efek Hover + Shadow Pada Gambar Postingan Blog

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 yang di bagikan ini untuk membuat semua gambar yang berada di dalam postingan blog dengan otomatis mempunyai efek shadow, jadi sobat tak perlu lagi untuk memasukkan satu persatu kode pada tag div gambar dengan manual.

Ok sobat sekian tentang cara menambahkan efek hover + shadow pada gambar dan selamat mencoba dan semoga bermanfaat
0 Komentar untuk "Efek Hover + Shadow Pada Gambar Postingan Blog"