Februari 19, 2012

Efek Transparan Pada Gambar Posting (Post Image)

Situseo Blog : Membuat efek taransparan atau tembus pandang pada gambar-gambar (image) pada postingan (post image) akan menghasilkan tampilan yang lembut, apalagi ditambah dengan efek bias warna box pada gambar, untuk mewujudkan itu yang penting kita mengetahui letak atau bagian mana yang perlu kita modifikasi.

Pada umumnya setiap template menggunakan kode css .post img { untuk bagian gambar posting, mudah-mudahan pengkodeannya sama jadi tidak susah untuk menemukan bagian gambar posting (post image), untuk menemukan posisi kode .post img {, kalian masuk pada Design - Edit HTML, jika sudah ketemu, kalian tambahkan kode perintah transparan untuk post image, yaitu opacity seperi ilustrasi kode post image dibawah ini :

.post img {
opacity: 0.3;
}

Kode perintah opacity menunjukan perintah transparan yang di ukur dengan angka didepannya yang menunjukan tingkat transparansi-nya, semakin kecil semakin transparan dan sebaliknya.

Dengan kode opacity tersebut, gambar atau image dalam postingan secara otomatis akan transparan semua, sesuai dengan transparansi yang telah ditentukan angkanya dalam template, tapi efeknya belum kelihatan walaupun mouse melewati gambar tersebut, untuk menjadikan efeknya lebih kelihatan, kalian bisa tambahkan hover supaya terjadi perbedaan jika mouse melewati gambar posting tersebut, penerapan kodenya seperti ini :

.post img:hover {
opacity: 1.0;
}

Penambahan kode hover dengan opacity 1.0 menerangkan pada awal post image yang transparansi 0.3 jika mouse mendatangi gambar atau image akan menjadi jelas (sesuai gambar aslinya)

Semoga dengan penggunaan opacity dalam post image, bisa menjadikan bagian post kalian menjadi lebih baik.

Semoga bermanfaat,

8 Diskusi untuk Efek Transparan Pada Gambar Posting (Post Image)

6 April 2012 pukul 00.32  

mas, kok pas fade ke aslinya kok cepet bgt ya, sedangkan punya mas itu bisa lama?

6 April 2012 pukul 18.57  

@Rohmat Julianto tambah efek transition, untuk kodenya bisa lihat pada macam efek css3

11 April 2012 pukul 11.27  

mas saya tidak menemukan .post image,,

gimana ya mas ???

mohon pencerahaanya

12 April 2012 pukul 15.39  

@Mas Dalang tepatnya di mana mas ??? di atas <head apa di mana mas ???
hehehe

jadi kalau tidak di temukan .post img

bisa di taruh sendiri mas

13 April 2012 pukul 00.24  

@trii waluyo sudah saya jawab pada komentar kamu sebelumnya

16 April 2012 pukul 19.33  

gmana nmbahin efek animasinya mas ??

11 Agustus 2012 pukul 14.41  

thanks gan, dah ketemu hehe

15 Juli 2013 pukul 23.52  

bner" berhasil bro di sini, daripada di blog buka rahasia malah jadi acak"an blog saya !
makasih bro !

Posting Komentar

supaya diskusi berjalan baik, gunakan tombol jawab untuk reply. penggunaan tombol jawab, jangan menghapus kode komentar pada kotak komentar, cukup mengetikan komentar disebelah atau dibawah kode komentar. Terima kasih.

rate this post
beri nilai posting ini
Terima kasih,
Ping your blog, website, or RSS feed for Free Web DirectoryMy Ping in TotalPing.comBloggers - Meet Millions of Bloggers
Protected by Copyscape Duplicate Content Check

Template by Dicas Blogger | Modifikasi ulang oleh Mas Dalang

101011  ©Situseo Blog | Powered by Blogger | Back to Top