2012-03-30
Oleh - Kang Salman

Membuat Efek Hover Pada Gambar

Membuat Efek Hover Pada Gambar
Advertisement:
Cara Membuat Efek Hover Pada Gambar - Ada yang bertanya pada kang salman bagaimana cara membuat efek hover pada gambar, atau efek hover pada banner iklan. lebih lengkap pertanyaannya seperti ini:

"cara membuat tempat/wadah untuk menempatkan iklan yang hover seperti yang mas salman punya, gimana cara membuatnya / apakah ada tutorialnya di blogini? nnyang ini loh box Advertise here namun bukan menggunakan image tetapi script, bila cursor kita arahkan ke box tersebut maka box tersebut akanberganti warna menjadi agak gelam (hover)ntolog pencerahannya, trimakasih"

Dalam tutorial ini kang salman akan bagi 2 yaitu efek hover pada gambar, dan efek hover pada elemen iklan / elemen sidebar. sayritaska priotaskan dulu pada, gambar, sedangkan elemen sidebarnya akan di berikan kemudian.

Demo:
(arahkan mouse pada gambar)
Membuat Efek Hover Pada Gambar
.hovereffect img {
opacity:0.5;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity:0.5;
-khtml-opacity:0.5;
}
.hovereffect:hover img {
opacity:1.0;
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
-moz-opacity:1.0;
-khtml-opacity:1;
}

Agar efek tersebut muncul pada gambar, sisipkan kode berikut pada alamat gambar anda. class="hovereffect"

Contohnya seperti ini
<a class="hovereffect" href="http://3.bp.blogspot.com/-G2K97noLtds/TwH4H_fsBWI/AAAAAAAACmY/N8X6xPtp7-c/s1600/Kucoba+logo+2012.png"><img alt="Membuat Efek Hover Pada Gambar" border="0" src="http://3.bp.blogspot.com/-G2K97noLtds/TwH4H_fsBWI/AAAAAAAACmY/N8X6xPtp7-c/s1600/Kucoba+logo+2012.png" title="" /></a> 
Tutorial ini bisa di gunakan di semua platfrom seperti wordpress, dan cms lain yang mendukung bahasa CSS

Demikianlah semoga Cara Membuat Efek Hover Pada Gambar
bermanfaat.

Baca Juga:

Berlangganan KUCOBA Email Update
Advertisement:
Judul : Membuat Efek Hover Pada Gambar Deskripsi : Admin : Terbit Rating : 5 stars

  • Lifestyle