Membuat efek gambar dengan mask

Hayy sobat,.. Artikel hari ini saya masih bahas sama kayak yang kemarin² yaitu tentang image effect, heheehee :D Tetapi saya menjelaskan beberapa fitur menarik dari browser webkit, khususnya animasi gambar menggunakan masker, tapi effect ini hanya akan bekerja di browser webkit (Chrome dan Safari).
Pada dasarnya, ini adalah sebuah gambar (atau gradien), di mana bagian transparan akan membuat anda terlihat elemen, non-transparan akan membuat anda terlihat elemen.
Effect ini mirip seperti di Photoshop. Untuk DEMO nya saya menggunakan-webkit-mask properti (dengan berbagai variasi).
Properti ini digunakan untuk mengatur mask individual nilai properti untuk berbagai elemen.
Nah,.. Sekarang, silakan sobat cek demo nya di bawah ini.

Gimana sobb keren kan,..??? xixixii :)
Jika sobat berminat untuk membuat nya silahkan sobat simak step by step.

Simak langkah² dibawah ini:

1. Login ke akun blogger sobat

2. Klik Template » Edit HTML

3. Kemudian tekan Ctrl+F cari kode ]]></b:skin> atau </style>

4. Lalu tambahkan script CSS berikut ini tepat diatas kode ]]></b:skin> atau </style>

.type3 {
    -webkit-mask: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWM8q5KEQh4PxOIMLkXZ3LXf6WkH8HLHBSWw-ThXxWWTUlat6C2RBYXz2xv6nxH6m3Zi1iJUl09KOUPoWYe9orDMl1fN69ClhFo8rtr2TgK24Ski8IH0zSd5vTpQZksL84Yo8wyxJjmVN/s1600/BIE_mask.png) no-repeat center center;
}
.type3 {
    -webkit-mask: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcWM8q5KEQh4PxOIMLkXZ3LXf6WkH8HLHBSWw-ThXxWWTUlat6C2RBYXz2xv6nxH6m3Zi1iJUl09KOUPoWYe9orDMl1fN69ClhFo8rtr2TgK24Ski8IH0zSd5vTpQZksL84Yo8wyxJjmVN/s1600/BIE_mask.png) no-repeat center center;
}
.type3:hover{
    -webkit-animation: loop_frames 1s ease-in-out infinite;
     -webkit-animation-direction:alternate;
     -webkit-mask-size: auto 100%;
}
@-webkit-keyframes loop_frames {
     0% { -webkit-mask-size: auto 100%; }
     100% { -webkit-mask-size: auto 70%; }
}

.type4 {
    -webkit-transition: -webkit-mask-position 0.5s ease;
    -webkit-mask-size: 400px 300px;
    -webkit-mask-image: -webkit-gradient(linear, left top, right top, color-stop(0.00, rgba(0,0,0,1)), color-stop(0.90, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,0)));
    -webkit-mask-position-x: 400px;
}
.type4:hover {
     -webkit-mask-position-x: 0;
}

Untuk membuat dua efek pertama saya harus menggunakan gradien kustom radial berikut script nya.

5. Tekan Ctrl+F cari kode </head> Lalu masukan script di bawah ini tepat di atas kode </head>

$(document).ready(function(){ 

    $('#examples img').hover(function () { 
        var $imgObj = $(this);

        // class name
        var sClass = $(this).attr('class');

        // radius
        var iRad = 0;

        // interval
        var iInt;
        if (iInt) window.clearInterval(iInt);

        // loop until end
        iInt = window.setInterval(function() {
            var iWidth = $imgObj.width();
            var iHalfWidth = iWidth / 2;
            var iHalfHeight = $imgObj.height() / 2;

            if (sClass == 'type1') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfWidth+' '+iHalfHeight+', '+ iRad +', '+iHalfWidth+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            } else if (sClass == 'type2') {
                $imgObj.css('-webkit-mask', '-webkit-gradient(radial, '+iHalfHeight+' '+iHalfHeight+', '+ iRad +', '+iHalfHeight+' '+iHalfHeight+', '+ (iRad + 30) +', from(rgb(0, 0, 0)), color-stop(0.5, rgba(0, 0, 0, 0.2)), to(rgb(0, 0, 0)))');
            }

            // when radius is more than our width - stop loop
            if (iRad > iWidth) {
                window.clearInterval(iInt);
            }

            iRad+=2;
        }, 10);
    }); 
});

6. Kemudian simpan template sobat. /hehe

Penerapannya:

Supaya kode di atas muncul di posting blog sobat » Silahkan buat Entri baru gunakan mode HTML kemudian masukan kode berikut ini kedalam halaman posting blog sobat.

<div id="examples">
  <img class="type1" src="URL images" />
  <img class="type2" src="URL images" />
  <img class="type3" src="URL images" />
  <img class="type4" src="URL images" />
</div>

Gimana sobb simple kan cara nya,.. silahkan di coba dan semoga berhasil,...