Sunday, October 23, 2011

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:

7 comments

  1. nape tak jadi ek? maybe kite yg salah buat kot haha. anyway cantek blog. suke sangat! :)

    ReplyDelete
  2. yeye .. da jdi thanx kak fara dari fara .. ha3

    ReplyDelete
  3. Mintak nak copy tutorial ni.sy akan kredit!

    ReplyDelete
  4. knape tak jadi ea versi yg kedua tu.. erm.. mcm mne nk buat nie..?huh :(

    ReplyDelete
  5. Hey there XDD

    Farah, penat sy carik opacity blur ke terang.. kebanyakn blog sy pergi sume jadi opacity terang ke blur.. thanks for this tuto

    i favie this link.. and mohon tuto nih utk blog sy nanti can I?

    I will credit you back thanks ^__^

    ReplyDelete

-Assalamualaikum, sila tinggalkan komen anda.
-Kalau suka tekan LIKE.
-Insyaallah komen anda akan dilayan :)

Jangan lupa LIKE! dan SHARE!

Terima kasih :)

Blogger Copyright © 2019. All Rights Reserved by BLOG CIK NURFARAH