Tutorial 119 : Image Opacity Effect ( 2 VERSION )

Assalamualaikum.
Nak tunaikan tutorial yang dah lama tak tertunai. Busy kan..
Artikal pun berlambak tak baca dengan bahasa yang berfalsafah bagai. Inilah rutin kehidupan seorang pelajar. Sedih minggu ni terperuk kat bilik je.. orang tu busy sangat kan.. :(

Nak ajar korang satu lagi tutorial sebelum lunch dan study ececece..huhuu.

Ada 2 VERSI untuk tutorial ini.

Jom try buat.

1. Sign in blogger > Design > Add Gadget > Html/JavaScript

2. Copy dan paste di dalam Html/JavaScript, ambil salah satu code di bawah mengikut citarasa korang, jangan copy dua-dua sudah, kang terencat pula template tu.


VERSI 1
- Gambar akan menjadi pudar/kabur takhala cursor menyentuh/dihover gambar.

<style>
/* ----- Image opacity effect 1 ----- */
.post a img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
}

.post a:hover img {
filter:alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
-khtml-opacity: 0.5;
}
</style>

VERSI 2
- Gambar akan menjadi terang takhala cursor meyentuh/dihover gambar.

    <style>
    /* ----- Image opacity effect 2 ----- */
    .post a img {
    filter:alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
    -khtml-opacity: 0.5;
    }

    .post a:hover img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    -khtml-opacity: 1.0;
    }
    </style>

3. Dah copy, SAVE dan lihatlah hasilnya.

Dah cuba kenalah komen, takkan diam je.

SHARE:

blog tutorial