Membuat efek hover border dan bayangan pada gambar di postingan Blog

HaiSob apa kabar 😊 ? Ok sobat pada kesempatan ini saya akan membagikan tentang cara membuat efect hover dengan bayangan, border radius plus shadow pada gambar di postingan blog, efek ini lumayan kerenlah sob.

Dengan memberikan efek pada gambar merupakan salah satu cara untuk mempercantik atau membuat tampilan blog lebih menarik. Tujuan membuat efek hover pada gambar seperti ini biasanya untuk menarik perhatian pengunjung blog supaya lebih terkesan dengan blog kita 😀. Efek ini akan terlihat jika kursor mouse di arahkan pada gambar di postingan blog yang telah ditambahkan efek ini .

Shadow and Border Radius Image Hover Effect


Cara Membuat efek hover border radius dan bayangan pada gambar di postingan Blog
Shadow and Border Radius Image Hover Effect

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.

Contoh tampilannya silahkan lihat demonya, oh iya pada demo arahkan kursor mouse pointer ke gambar untuk melihat efek hovernya.




Cara Memasang CSS Image Hover Effect di Blogger


1. Di Blog Blogger 😊
2. Pilih menu Template ➔ Edit HTML
Cara Membuat efek hover border dan bayangan pada gambar di postingan Blog
Template ➜ Edit HTML

3. Letakan kode dibawah ini di atas kode ]]></b:skin> atau di atas </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}
4. Save template.

Oh iya berbicara soal efek gambar sebelumnya juga saya telah membagikan efek hover gambar bergetarmembuat efek blur pada gambarShirk hover efek, dan juga yang tidak kalah kerennya adalah membuat animasi hover 3D pada gambar.

Ok sobat sekian tentang cara membuat efect hover dengan bayangan, border radius plus shadow pada gambar di postingan blog, semoga bermanfaat.
Join This Site