27 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

 


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

27 komentar :

  1. .kunjungan balik nih, mbag. *mbag bukan ya?
    .hover th mksud.a gmn ya?

    BalasHapus
  2. Aduh....,Ukhti ini gimana...., Trik Jquery yang kemarin aja belum selesai saya praktekan (masih diutak-atik), sudah muncul lagi Trik baru CSS ....(LOL)

    Tapi noproblem karena saya memang baru tahu atribut Opacity pada CSS, biasanya saya pakai dua gambar untuk keperluan hover jadinya lebih lambat respon hovernya, tetapi kalau dengan CSS seperti yang Ukhti tulis respon Hover sangat baik.

    Satu lagi (maaf). Saya perhatikan Ukti selalu upload gambar pada tinypic.com, kalau dibanding photobucket loadingnya cepat mana?

    Terima kasih.

    BalasHapus
  3. @ super: effect hover bisa beragam, contoh diatas effect buram, contoh lain bnyk seperti zoom, roating dll, apalagi jika menggunakan JQuery. pada link seperti (link berwarna pelangi atau berbackground warna dan image animasi)

    @ yuda: iya krn mmg bnyk cara membuat effect hover.

    untuk tempat hosting image, sy jg menggunakan photobucket selain tinypic dan imageshack. mana yg lbh cepat loadingnya? saya kurang tahu?

    tapi klu dibandingkan dgn upload image di blogger untuk postingan diblog ini, pasti lbh cepat blogger krn 3 t4 hosting diats trmsk eksternal link.

    BalasHapus
  4. mantap...
    keep posting my brooo

    BalasHapus
  5. .owh, jd hover byk macem.a ya.
    .yowes, mw muter2 dlu

    BalasHapus
  6. jazakalloh infonya.
    bengkel sehat dah follow this blog.

    BalasHapus
  7. Kunjungan Silaturrahmi..

    Wah Info baru neg..
    Syukron sdh berbagi..

    Oy..
    Afwan ukhti..
    Ane Ikhwan..

    Salam Ukhuwah jg..
    Ane seneng kalo bisa Banyak belajar dr Ukhti,
    coz ane baru belajar neg..

    Syukron sudah Silaturrahmi k blog ane..

    BalasHapus
  8. Nice info mbak,,, thanks y udah share...

    BalasHapus
  9. trimaKsh buat infonya Good blog and good Post tanks

    BalasHapus
  10. tips baguss
    hy sob... kapan mo maen keblogku, kita ngopi bareng, aku mau cerita-cerita gitu, aku tunggu ya

    BalasHapus
  11. wow keren kren tutorialnya...
    saya orang awan bgt mohon pencerahannya dong bikin tutorial bagi orang awam bgt kaya saya.
    1.Saya masih bingung untuk menempatkan kode2 CSS itu dimana apa harus selalu di atas skin?
    2. Kemudian jquery umumnya ditempatkan dimana ?
    3. Apa semua file jquery yg didownload di masukan ?
    4. Kadang untun membuat menu itu ada yang pakai ADD WIdget kadang ga gimana itu?
    terimakasih saya tunggu infonya

    BalasHapus
  12. @ Anonim:
    1. Untuk penempatan CSS diatas
    ]]> klu ingin meletakkan dibawahnya maka harus diawali dgn < style> dan tutup dgn
    begitu jg klu ingin menempatkannya pd bgn elemen halamn add gadget sbg widget digabung dgn HTML dan JS

    2. Bisa diatas bs jg langsung sbg pd bgn elemen halaman add gadget sbg widget digab dgn HTML dan CSS

    3. Klu sdh ada sebuah file JQuery pd sebuah template kita tdk perlu menambahkan file JQuery lg kecuali versix berbeda.

    4. Karena bisa juga ditambahkan langsung pada bagian edit HTML.

    Semoga dipahami. Sy jg blogger, sy hnya belajar secara otodidak dan lbh bnyk terinspirasi dari pengamatan dan berhasil menerapkanx krn berani mencoba dan trs mencoba.

    BalasHapus
  13. @ Anonim: Maaf sy baru bc kembali tanggapan sy, trnyata ada kode yg sy tulis tdk tampil. Beberapa kode HTML tdk bisa diterima dlm kolom komentar. Klu msh bingung bertanya lewat buku tamu jk prtanyaan msh brkaitan dgn kode-kodean lg

    BalasHapus
  14. thank atas penjelasannya, jujur aja blog ini yang paling detail dan menarik tutorialnya.
    maaf kalo saya memberi komentar di beberapa postingan( saking pengen cepet di tanggapi hehehe)
    sy ga punya background bhasa/kode html,css.. tapi sy seneng baca dan mau mencoba...
    ya bingung juga kalo ada tutorial dr bbrapa bloger yang tidak menjelaskan penempatan kodenya.
    misal nya penepatan kode tutorial ini kode yang paling bawah harus di simpan di mana.thanks

    sukma

    morning_bl@yahoo.com

    BalasHapus
  15. @ Anonim: Alhamdulillah klu dah paham dgn penjelasan singkat sy yang jg karena keterbatasan kolom komentar menampilkan kode HTML sehingga beberapa kode tdk tampil tp anda sudah bs mengerti.

    Terimakasih atas apresiasinya.

    BalasHapus
  16. datang lg neh

    ahabis ga da bosennya baca baca di blog ini
    mohon izin download ah setiap tutorl yg sy pengen....

    saya pernah lihat tapi lupa blgonya...Link nya kalo tersentuh cursor jadi keluar api/nyala bintang

    ada ga di sini...thank


    sukma

    BalasHapus
  17. @ Anonim: Iya ada, silahkan lihat disini...

    Makasih apresiasinyax

    BalasHapus
  18. wah kayaknya ini dia yang lebih kereenn heheee...makasih ats kunjungannya mas dan sharingnya......perlu banyak belajar nich di sini:)

    BalasHapus
  19. wow.... keren....... suka bgt aku sama css3 nih....

    BalasHapus
  20. wooooww....... ada lagi gak artikel css3???

    BalasHapus
  21. Assalamualaikum wr.wb.
    Syukron ukhti, bekerja muluuus...
    Sangat membantu tugas saya...
    =D

    BalasHapus
  22. aduh ukhti... pinter banget... kena;an yuk...

    BalasHapus
  23. wiiiih keren mas bro,gx nyangka hasilnya seperti itu...

    BalasHapus
  24. terimakasih atas infonya hover image yang gue cari nih mohon ijin gan...

    BalasHapus
  25. terima kasih banyak ya :) guna banget buat ngakalin jscript di proyek sy yg bentrok :D

    BalasHapus
  26. Makasih banyak bro, saya sudah terapkan di blog saya harmonisasi.com. sukses diterapkan!! :)

    BalasHapus
    Balasan
    1. Sama-sama, thanks jg ats kunjungan dan apresiasinya.

      Hapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!