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,