CSS3 : Gambar transparan dengan opacity

CSS3 sekarang ini sering di gunakan untuk mendesain website terutama blog, karena mudah untuk digunakan. Sekarang saya akan memberitahukan cara membuat gambar menjadi transparan ketika disorot dengan CSS3.

Note:
agar lebih lancar, saya sarankan sobat menguasai :
Bab IV : Belajar CSS bagian 3 ( Link | hover )
Bab IX : Belajar CSS3 Bagian 3 ( Transisi )
dan ilmu dasar css tentunya. Atau kalian bisa ngulik sendiri ...

Step - stepnya yaitu :

1. Cari element apa yang akan di buat efek transparan ketika hover, saya ambil contoh #header-post

2. Ceritanya kan kita akan membuat efek pada hover bukan waktu awal. maka buat hover pada element tersebut misal :
awalnya seperti ini :

#header {float:center;width:960px;height:150px;text-align: center;color:#111;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSm90INmdD0ZQ5gogCGqfY2KAtnpVC9mYUp4ZjAw4St0VWdLThtyBOvvMxdwtSPx0nqk-jAVJogVhQ5cgwp5VTOKHdbqQv4LSHjZ84F87JZqKjbWhkBgMEkwf8s4ABG_C_gFPgyOaA_SY/s1600/Farkryzer+x1.png) no-repeat scroll top center;}
#header h1 {visibility:hidden;}

kemudian buat hover untuk element #header menjadi :

#header {float:center;width:960px;height:150px;text-align: center;color:#111;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqSm90INmdD0ZQ5gogCGqfY2KAtnpVC9mYUp4ZjAw4St0VWdLThtyBOvvMxdwtSPx0nqk-jAVJogVhQ5cgwp5VTOKHdbqQv4LSHjZ84F87JZqKjbWhkBgMEkwf8s4ABG_C_gFPgyOaA_SY/s1600/Farkryzer+x1.png) no-repeat scroll top center;}
#header:hover {  }
#header h1 {visibility:hidden;}

3. Setelah itu masukan kode cssnya, lihat rumus di bawah ini :

element:hover {opacity: XXX;filter:alpha}

Keterangan :

XXX kamu ganti sesuai dengan keinginan kamu, misalnya 0.5 atau 0.25 dll, makin kecil nilainya maka tingkat transparan suatu objek akan semakin tinggi.

Contoh yang sudah saya buat adalah :

.gambar {-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s}
.gambar:hover {opacity: 0.7;filter:alpha}

Keterangan:
yg berwarna hijau : saya tambahkan dengan efek transisi agar tidak terlalu biasa-biasa saja.
yg berwarna kuning : contoh dari kode CSS gambar transparan.

kamu bisa kreasikan dan kembangkan sendiri cara tadi, jika ada di tanyakan silahkan isi kotak komentar.

Sesuai permintaan sobat @Zh!nTho saya akan berikan sedikit demo yang sudah jadi :

Sorot gambar ini kemudian alihkan

Buat @Catatan Ardha saya akan memberikan caranya, seperti cara diatas menggunakan opacity kita tinggal memodifikasinya sedikit sob :

#gambar1{-moz-transition:all .5s;-webkit-transition:all .5s;-o-transition:all .5s;opacity:.5}
#gambar1:hover{opacity: 1}

Keterangan:

yang berwarna hijau: artinya gambar transparan sebelum disorot nilai opacity = .5 menandakan gambar dalam keadaan transparan

yang berwarna merah: artinya gambar menjadi biasa ketika disorot nilai opacity = 1 menandakan gambar utuh seperti semula

Coba sendiri sorot gambarnya

Farkryzer