15 January 2012

Tutorial Image Opacity Effect 2 Version

‎بسم الله الرحمن الرحيم
 السلام عليكم


Image Opacity Effect . huu mesti ada yang tak tahu dan mesti ada yang tahu . Saya nak ajar pada yang tak tahu je , yang tahu jangan menyebok ! hee :P gurau ^^

Okay , image opacity effect tu ada 2 versi tau . Pertama , gambar di blog , apabila disentuh cursor akan menjadi blur . Kedua , gambar di blog menjadi blur , dan apabila disentuh cursor akan menjadi terang seperti asal nye . Faham ? 

Cara dia sonang sangat ! ^_^

Versi 1 :

Copy code ini :

<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>


Then , dari Dashboard - Design - Add a Gadget - Edit html / javascript
Paste code tadi dalam ruangan html tuu .




Versi 2 :


Copy code yang ini :



<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>


Pilihlah mana satu yang anda nak ^_^ Selamat mencuba . bittaufiq wannajah ^^, 

2 comments:

Ahmad Ali (bukan nama sebenar) said...

dah follow sini . ngeh2
jom usha sana

Nur SyafiQah said...

Syukron . Insya'ALLAH , okay .