Membuat Efek Lens Flare sederhana dengan CSS

Hallo teman teman, pada kesempatan kali ini saya akan memberikan sebuah trik tentang HTML dan CSS. Pada trik kali ini kita akan membahas bagaimana cara membuat efek lens flare dengan css.

Pertama-tama kita harus tahu dahulu apa itu Lens Flare. Lens Flare adalah adalah efek yang timbul dari adanya pembiasan cahaya baik dari matahari atau lampu menuju ke lensa kamera. Dan biasanya akan muncul efek lingkaran pada gambar yang dihasilkan.

Untuk membuat efek Lens Flare kita membutuhkan komponen seperti yang saya buat seperti ini.

Dimana masing-masing div diatas memiliki style CSS seperti berikut

Untuk lebih jelasnya bisa dilihat pada demo yang saya buat seperti dibawah ini

*klik  logo edit on codepen di kanan atas embed.