Make Image More Attractive use CSS Blend Mode

Sekarang AA Koben akan mengajak kalian sobat blogger bermain-main dengan salah satu trick image yang lagi hangat! Pernah mendengar blend mode CSS? Jika diartikan kata blend meniliki arti perpaduan/campuran. Pada kesempatan sekarang kita akan mencoba bagaimana memadukan 2 buah gambar menjadi 1 bingkai seolah-olah dari ke dua gambar tersebut saling berkaitan ;)) Memang sedikit susah untuk dijelaskan dengan kata-kata! Ada baiknya sobat lihat demo sederhana berikut...
Original image

Gambar 1	Gambar 2

Blend mode

Keren kan!!!
Source coded by: jsdo.it/21f/zlHx

Bagaimana hal itu bisa terjadi, Pener by BROWNERD telah menjelaskannya buat kita dengan artikel berjudul 3 rad blend-mode techniques codepen.io/brownerd/full/jPMdvM Untuk melakukan tester master Antoinette Janus sudah berkreasi dengan Blend Mode Tester codepen.io/acjdesigns/full/NGEjOL/ Kalau sobat ingin langsung memakai kode CSS blend mode ke dalam blog...hohoho...jangan khawatir bro. Nick Una telah berbaik hati membuatkan CSSgram github.com/una/CSSgram

Silahkan sobat kunjungi links yg sudah Beben kasih. Jangan lupa test mesin browser sobat apakah sudah mendukung dengan si blend atau blom yah ;)) Sudah capek-capek baca dan ngulik tauknya browser engine belom support =)) Tembusan mix-blend-mode tympanus.net/codrops/css_reference/mix-blend-mode

Happy blend \m/