Membuat lightbox dengan opacity

Lightbox ini berfungsi menggelapkan widget dan ketika disorot mouse widget itu akan terang kembali seperti semula.


Di bawah ini adalah contoh kode sebuah box yang telah dilengkapi dengan efek opacity, CSS3 transition dan beberapa kode lain.
.boxwidget {
      height: 250px;
      overflow: auto;
      margin: 20px 4px 10px; 
      padding: 15px 8px;
      background: #111;
      color: #666;
      border: 2px solid #555;
      border-radius: 6px;
     -moz-border-radius: 6px;
     -webkit-border-radius: 6px;
      opacity: 0.4;
      filter:alpha(opacity=40);
     -o-transition: all ease-in 1.2s;
     -moz-transition: all ease-in 1.2s;
     -webkit-transition: all ease-in 1.2s;
}
.boxwidget:hover {
      background: #660000;
      color: #eee;
      opacity: 1.0;
      filter: alpha(opacity=100);
}

1. Caranya masuk akun blogger
2. pilih rancangan
3. lalu masuk menu Edit HTML
4. Cari kode ]]></b:skin> caranya tekan CTRL+F
Simpan kode CSS tadi di atas kode ]]></b:skin>


Untuk menggunakan box tersebut, Sobat blogger mania  harus menggunakan kode xHTML seperti di bawah ini:
- Pilih rancangan
- Pilih menu elemen laman
- Tambah gadget, pilih html/java script
- masukkan kode berikut

<div class="boxwidget">
Di sini widget Atau teks diletakkan
</div>

-Selesai
*Catatan
Ganti tulisan Di sini widget atau Teks diletakkan sesuai kode widget yang Anda punya