Terkadang masih banyak orang masih kebingungan dalam membuat transparansi pada sebuah gambar, objek, teks atau yang lain nya, berikut ini akan saya jelaskan bagaimana Cara Membuat Gambar Transparan dengan CSS3, transparansi merupakan efek memudarnya suatu objek apabila kita arahkan kursor terhadap objek tersebut, objek yang terlihat memudar akan terlihat menjadi jelas ataupun sebaliknya. dalam contoh kasus ini kita bisa menggunakan properti CSS3 yakni properti opacity. Opacity merupakan sebuah efek transparan dari CSS3, dalam penggunaan nya kita bisa gunakan sebagai efek dari sebuah objek, gambar, teks dan yang lain nya. Efek opacity bisa digunakan tanpa perlu ada efek hover walaupun sebenarnya kebanyakan website lebih banyak menggabungkan efek opacity dengan efek hover.Adapun cara penulisan properti opacity pada CSS3 dituliskan sebagai berikut.
opacity: xx;
Jika kita menggunakan nilai pada opacity maka dituliskan sebagai berikut.
opacity:0; opacity:0.2; opacity:2.0;
Jika nilai opacity semakin kecil nilai nya, maka efek yang ditimbulkan akan semakin kuat dan jika nilai opacity semakin besar, maka opacity yang ditimbulkan akan semakin lemah. Berikut ini adalah contoh penerapan opacity pada objek gambar.
Kalian bisa buat file HTML dan ketikan sintak berikut pada HTML.
<a href="#"> <img src="https://goo.gl/iNDAc8"> </a>
Silahkan kalian masukan objek gambar pada kode img src, selanjut nya untuk transparansi pada gambar nya kita gunakan kode opacity seperti berikut.
img {
opacity: 2.0;
}
img:hover{
opacity: 0.3;
}
Setelah sintak diatas diketikan semua, sekarang jalankan pada browser masing-masing dan lihat hasi nya.
Catatan: Tidak semua penggunaan opacity menghasilkan efek trasnparansi berjalan pada semua browser. tapi jangan khawatir kita bisa mengatasi nya dengan cara menambahkan properti pada masing-masing browser seperti berikut ini.
.opacity {
-webkit-opacity: 0.3; /* google chrome */
-moz-opacity: 0.3; /* mozilla firefox */
opacity: 0.3; /* global */
filter: alpha(opacity=50); /* internet explorer */
}
Bagaimana, cukup mudah bukan Cara Membuat Gambar Transparan dengan CSS3. Jika artikel ini bermanfaat silahkan kalian share supaya bisa bermanfaat bagi orang banyak 🙂