CSS Image Transparency - Creating a Transparent Image

Cara mudah dan praktis merubah sebuh foto menjadi Opacity / transparan lebih banyak dicari para blogger daripada mencari cara yang tersulit. :D

Kali ini akan saya coba uraikan secara singkat dan tidak bertele tele, sebab saya sendiri orangnya kurang senang menunggu, bagaimana dengan Anda..?

Dibawah ini telah saya pisahkan beberapa kode yang cukup praktis untuk dicoba, mulai dari yang paling mudah (standar).

1. Transparent Image Sederhana
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
</style>
<img src="url-foto.jpg" width="150" height="113" alt="Deskripsi gambar"/>


2. Membuat Transparan dengan Effect Hover 
<style>
img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}

img:hover {
    opacity: 1.0;
    filter: alpha(opacity=100); /* For IE8 and earlier */
}
</style>
<img src="url-gambar.jpg" width="150" height="113" alt="Deskripsi gambar"/>
<img src="url-gambar.jpg" width="150" height="113" alt="Deskripsi gambar"/>

Catatan. Agar selector  :hover bisa berjalan di browser Iinternet Explorer maka wajib menambahkan <!DOCTYPE html> pada bagian paling atas.


3. Text in Transparent Box - Memasukkan teks kedalam kotak transparan
<style>
div.background
{
  width: 500px;
  height: 250px;
  background: url(url-gambar.jpg) repeat;
  border: 2px solid black;
}
div.transbox
{
  width: 400px;
  height: 180px;
  margin: 30px 50px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
}
div.transbox p
{
  margin: 30px 40px;
  font-weight: bold;
  color: #000000;
}
</style>
<div class="background">
<div class="transbox">
<p>Teks ini muncul didalam kotak background</p>
<p>Teks ini muncul didalam kotak background</p>
<p>Teks ini muncul didalam kotak background</p>
<p>Teks ini muncul didalam kotak background</p>
<p>Teks ini muncul didalam kotak background</p>
<p>Teks ini muncul didalam kotak background</p>
</div>
</div>

Saya rasa kode-kode diatas cukup mudah diterapkan, jika masih ada pertanyaan jangan malu untuk menulis dikomentar. Terimakasih yang telah menyempatkan diri membaca coretan saya hari ini semoga bermanfaat. 
URL

Komentar yang bermanfaat mendapat Rating*****oleh Admin blog ini