Membuat Effect Hover Pada Image Dengan CSS -Assalamu Alaikum WR.WB Hallo sahabat TrikMITOS-blog seputar informasi, islami,kesehatan, kecantikan Tips dan Trik android kord gitar dll, Pada Artikel yang anda baca kali ini dengan judul Membuat Effect Hover Pada Image Dengan CSS, saya telah mempersiapkan artikel ini dengan baik untuk anda baca dan ambil informasi didalamnya, yang mungkin bermanfaat buat anda. mudah-mudahan isi postingan Artikel Blogger Tutorials, Artikel CSS, Artikel CSS3, Artikel Tutorial Blogger, yang saya tulis ini dapat anda pahami, karna mungkin dari beberapa pengunjung bahasa atau tulisan saya ini agak sulit di mengerti...hehehe benarkah??!!!. baiklah, tanpa panjang lebar dan bertele-tele lagi selamat membaca, jangan lupa baca juga artikel lainnya, karena masih banyak artkel yang menarik lainnya yang menurut saya pribadi sangat bermanfaat

Judul : Membuat Effect Hover Pada Image Dengan CSS
link : Membuat Effect Hover Pada Image Dengan CSS
Gambar dibawah ini

Membuat Effect Hover Pada Image Dengan CSS

Postingan kali ini saya hanya ingin mengetengahkan trik sederhana membuat effect hover pada image dengan bantuan CSS. Seperti apa effect yang terlihat, silahkan sorotkan pointer pada sample image dibawah ini:

Nah cara menambahkan effect hover pada image untuk template blogger sebagai berikut:

1. Setelah sig in pada account blogger sobat>>> pada dasbor>>> Klik Tata Letak>>> Edit HTML

2. Tambahkan kode CSS berikut diatas tag atau kode ]]></b:skin>

.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;
}

3. Simpan Template

Sedikit penjelasan dari kode CSS diatas, untuk membuat effect buram atau hover pada image kode yang kita tambahkan adalah "hovereffect" sedangkan "opacity", "filter:" alpha, "-moz-opacity" dan "-khtml-opacity" adalah digunakan untuk membuat effect hover terbaca pada beberapa browser. Seperti:

Properti "opacity" digunakan untuk browser yang mendukung standar CSS3 (sebagian besar browser modern mendukung CSS3).
Sementara "filter: alpha" adalah untuk Internet Explorer,
"-Moz-opacity" adalah untuk untuk Firefox, walaupun versi baru mendukung "opasitas",
"-Khtml-opacity" adalah untuk Safari dan Chrome untuk kompatibilitas ke belakang.
"0.5" dan "1.0" digunakan untuk memberitahu browser kuantitas kegelapan.

Sekarang untuk menambahkan effect ini, sobat harus menambahkan class = "hovereffect" untuk image sobat.

Sebagai contoh biasanya ketika kita menambahkan image kodenya sebagai berikut:

<a href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Untuk menambahkan effect hover pada image kodenya jadi seperti dibawah ini:

<a class="hovereffect" href="http://i42.tinypic.com/6ellog.jpg"><img border="0" height="240" src="http://i42.tinypic.com/6ellog.jpg" width="320" /></a>

Effect hover ini tidak saja berfungsi untuk blogger tapi juga dapat digunakan dalam platform blog yang menggunakan CSS, seperti Wordpress.

Lihat juga cara membuat hover pada link disini

 

Demikianlah Artikel Membuat Effect Hover Pada Image Dengan CSS

Sekianlah artikel Membuat Effect Hover Pada Image Dengan CSS kali ini, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sampai jumpa di postingan artikel lainnya jangan lupa tinggalkan komentar anda dan share yang banyak....heheheh.

Anda sekarang membaca artikel Membuat Effect Hover Pada Image Dengan CSS dengan alamat link https://trikmitos.blogspot.com/2010/04/membuat-effect-hover-pada-image-dengan.html