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