Author
Hi I'm a sixteen years old girl from Indonesia. Stalk me here.
Tutorials
All the list of tutorials, please click here. Thank you.
Credit
Tempelate by yours trully. Do not open my page source. I will respect you if you're respect me.

Image Opacity Hover // Tuesday, November 8, 2011

Ayo yang umat Islam sholat Maghrib duluuuu !!!! Kalo belum sholat nggak boleh baca ini! :P

Tutorial ini direquest oleh Ratrii (yang suka makan burger itu lho) :D :P xD kidding loh Rat, ntar kamu marah :))



Kalau belum tau maksud tutorial Lettha ini, tutorial ini bisa sedikit meringankan blog kamu karena gambar gambar akan di gelapkan dan akan terang kalau kursor menyentuhnya.

Masih bingung? aduh gimana cara Lettha jelaskan yah? hehehe judulnya aja Lettha karang sendiri xP



Gini aja, lihat dan sentuhkan kursor kamu di gambar berikut:














Kalau kamu sentuhkan cursor kamu jadi terang kan gambarnya??? Nah itu yang Lettha maksud, mungkin yang Ratri maksud juga itu. Hehehe



Ada 2 cara yaitu otomatis sama manual. Cara yang Manual kaya gini:



Letakkan kode ini dimanapun gambar kamu dipasang:





<style type='text/css'>

a.linkopacity img {

filter:alpha(opacity=50);

-moz-opacity: 0.5;

opacity: 0.5;

-khtml-opacity: 0.5;}
a.linkopacity:hover img {

filter:alpha(opacity=100);

-moz-opacity: 1.0;

opacity: 1.0;

-khtml-opacity: 1.0; }

</style>
<a class='linkopacity' ><img border="0"width="200" height="280" src="URL GAMBAR" /></a><br />


Yang Merah itu ukuran gambar. Sesuaikan dengan ukuran gambar kamu.

Yang tebal itu gantikan dengan URL Gambar yang akan kamu gelap terang kan.



Gimana? Terlalu rumit? terlalu susah? bagi Lettha kedua caranya samasaja kok :)

---------------------------------------------------------------------------------


Cara yang kedua:



Dashboard >>Design >>Edit HTML


cari kode /* Header lalu letakkan kode ini di ATASNYA !



/*------Tutorials http://letthaprincess.blogspot.com/------*/

img, a img { border: 0px; opacity: .75; filter: alpha(opacity=100); -o-transition: opacity 1.5s linear; -webkit-transition: opacity 1.5s linear; -moz-transition: opacity 1.5s linear; }

img:hover, a:hover img {opacity: 100; filter: alpha(opacity=100); -o-transition: opacity 1s linear; -webkit-transition: opacity .8s linear; -moz-transition: opacity 1.5s linear; }


SAVE TEMPELATE.



Nanti kamu arahkan kursor kamu ke gambar gambar yang ada di blog kamu, dia akan terang sendiri :)

Untuk hover hover yang lain, tunggu tutorial Lettha selanjutnya yah :D