بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Hover Image Box Shadow and Radius adalah trik CSS dimana ketika gambar disorot mouse maka gambar itu akan menjadi berbayang dan melengkung. Hem jadi asyik ya?
Lumayan bagus sih trik seperti ini guna mempercantik gambar yang ada di postingan sehingga gambar tersebut tidak terlihat polos, paling tidak gambar itu kita pakaikan "baju"/ CSS.
Baca Juga : Cara Membuat Widget Partners Menjadi Rapi dan Menarik di Mata Pengunjung Blog
Sehingga dalam artikel ini yang kita butuhkan hanya Shadow / Bayangan dan Radius / Sudut Lengkung. Itu saja. Gampang khan. Bila dipasang trik ini bisa jadi blog kamu semakin kece badai.
Supaya nanti lebih bagus lagi, kalian harus memperhatikan lebar dan tinggi gambar, jangan sampai melebihi batas margin dan padding. Tapi sepertinya Img property di template jaman sekarang sudah mendukung responsive artinya sudah menyesuaikan secara otomatis.
Okelah sekarang kita langsung saja praktek
Baca Juga : Membagi Artikel di Blog Menjadi 2 Kolom Supaya Rapi dan Indah
Hover Image Box Shadow and Radius
Masuk ke Tema, terus pilih Sesuaikan : Edit HTML, terus kamu cari kode ]]></b:skin>. Kemudian tempelkan kode dibawah ini di atas kode ]]></b:skin> tadi.
.alifacodebay {
padding:15px 15px 15px 15px;
margin:15px 15px 15px 15px;
}
a:hover img.alifacodebay {
padding:15px 15px 15px 15px;
margin:15px 15px 15px 15px;
border-top-left-radius:10px;
border-top-right-radius:10px;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
box-shadow: 0px 0px 12px #ff00ff;
}Kemudian setelah itu masuk ke postingan dan tempelkan kode ini
<a href="http://alifacode.com"><img class="alifacodebay" height="240" src="https://blogger.googleusercontent.com/img/a/AVvXsEhwjXhptcUaQe1euZTdF-wuvlJpWUM4vAvmnv7M19zlQuCkCVytSMnkNwNZNC_3O5sKS1aRYRjkKJgk2OF2YTqhZwBhCxcdO-4ru59BwLRrxBueJlfVKAVvZAnFcdxx-Vfb7-GAVgA_s5bWhXt8zka5AQzFN5qckLls9nm5zJOG6L6nhGKSYYy3fQ1w" width="360"></a>width="360" --> disesuikan lebar gambarnya
height="240" --> disesuaikan tinggai gambarnya
https://blogger.googleusercontent.com/img/a/AVvXsEhwjXhptcUaQe1euZTdF-blablabla --> gambar milik kamu nantinya
Sekian artikel yang dapat saya berikan. Semoga bermanfaat. Terima kasih ya yang sudah mampir di artikel Hover Image Box Shadow and Radius. Wassalam.
Label Postingan :
CSS
Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Hover Image Box Shadow and Radius . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.
