Cara Membuat Gambar Transparan dengan CSS3

Terkadang masih banyak orang masih kebingungan pada membangun transparansi di sebuah gambar, objek, teks atau yang lain nya, berikut ini akan saya jelaskan bagaimana Cara Membuat Gambar Transparan dengan CSS3, transparansi adalah efek memudarnya suatu objek apabila kita arahkan kursor kepada objek tersebut, objek yang terlihat memudar akan terlihat menjadi jelas ataupun sebaliknya. pada contoh kasus ini kita dapat menggunakan properti CSS3 yakni properti opacity. Opacity adalah sebuah efek transparan dari CSS3, pada pemakaian nya kita dapat gunakan selaku efek dari sebuah objek, gambar, teks dan yang lain nya. Efek opacity dapat digunakan tanpa perlu ada efek hover walaupun sebetulnya kebanyakan laman lebih banyak menggabungkan efek opacity dengan efek hover.Adapun cara penulisan properti opacity di CSS3 dituliskan selaku berikut.

opacity: xx;

Kalau kita menggunakan nilai di opacity karenanya dituliskan selaku berikut.

opacity:0;
opacity:0.2;
opacity:2.0;

Kalau nilai opacity semakin kecil nilai nya, karenanya efek yang ditimbulkan akan semakin kuat dan seandainya nilai opacity semakin besar, karenanya opacity yang ditimbulkan akan semakin lemah. Berikut ini ialah contoh penerapan opacity di objek gambar.

Kalian dapat bikin file HTML dan ketikan sintak berikut di HTML.

<a href=#>
<img src=https://goo.gl/iNDAc8>
</a>

Silahkan kalian masukan objek gambar di kode img src, selanjut nya bagi transparansi di gambar nya kita gunakan kode opacity seperti berikut.

img {
  opacity: 2.0;
}

img:hover{
  opacity: 0.3;
}

Setelah sintak diatas diketikan segala, sekarang ini jalankan di browser masing-masing dan lihat hasi nya.

Catatan: Tak segala pemakaian opacity menghasilkan efek trasnparansi berjalan di segala browser. tapi jangan khawatir kita dapat mengatasi nya dengan cara menambahkan properti di 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, lumayan gampang bukan Cara Membuat Gambar Transparan dengan CSS3. Kalau artikel ini bermanfaat silahkan kalian share supaya dapat bermanfaat untuk orang banyak 🙂

DEMO

Sumber https://kursuswebsite.org