Efek Transparan Pada Gambar Posting (Post Image)

0 komentar Jumat, 08 Juni 2012
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;
}

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;
}
 
Semoga dengan penggunaan opacity dalam post image, bisa menjadikan bagian post kalian menjadi lebih baik.
Semoga bermanfaat,
 
Sumber  
Read On