earth

Guestbook

/* Iklan google ads */
Tahu kan hover ? Saya sendiri bingung untuk menjelaskannya (?). Tapi kira-kira, hover ini bisa diartikan sebagai "suatu kondisi objek ketika mouse diarahkan padanya". Kondisi ini bisa kita buat sedemikian rupa sehingga berbeda dengan saat tidak didekati mouse.

Untuk membuat image hover bisa dilakukan dengan menambahkan atribut pada CSS. Tapi jika sobat memakai framework jQuery, tidak ada salahnya jika memanfaatkan keberadaanya.
Image Hover Dengan CSS
  • Tambahkan CSS berikut di atas kode ]]></b:skin>:
  • /*=== Image Meredup ===*/
    img {
    transition: 1s ease; 
    -o-transition: 1s ease; 
    -moz-transition: 1s ease; 
    -webkit-transition: 1s ease;
    }
    img:hover {
    opacity: 0.7; 
    -o-opacity: 0.7; 
    -moz-opacity: 0.7; 
    -webkit-opacity: 0.7; 
    filter: alpha(opacity=70); 
    }
    
  • Setelah itu simpan dan ucapkan Alhamdulillah...
Image Hover Dengan jQuery
  • Tambahkan script berikut di bawah kode ]]></b:skin>:
  • <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
    
    <script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('img').fadeTo('slow', 1);
            jQuery('img').hover(function() {
            jQuery(this).fadeTo('slow', 0.7); 
            }, function() { 
    jQuery(this).fadeTo('slow', 1); 
        }); 
    });
    </script>
    
  • Setelah itu simpan dan ucapkan Alhamdulillah...

Catatan:
  • Atur lamanya transisi. Pada CSS di atas lamanya 1 detik.
  • Atur img yang ingin dibuat hover. Pada CSS dan script di atas berlaku untuk semua image dalam perintah <img src="URL-Gambar"/>. Jika ingin kondisional, seperti hanya pada entry saja, ganti img dengan .post img, dst.
  • Atur opacity sesuai keinginan. Pada CSS dan script di atas opacity saat hover adalah 70% (0.7).

Ok, segitu aja sob. Semoga bermanfaat .....
  • Artikel Terkait Dengan CSS dan Javascript

    Terimakasih sudah membaca artikel SC Community's Blog

    16 komentar

    wah ini bisa membuat hover meredup mungkin boleh saya coba kang di blog aku yang lain kalau di blog utama aku jadi takut soalnya nggak mmeperbaiki kalau salah utak-atik

    4 November 2012 22.46  

    terimakasih sudah mau bagi ilmu mas

    10 November 2012 02.28  

    mantap gan

    mampir ya www.fikzstore.com

    18 November 2012 17.05  

    informasi yang amat berguna.

    harap tuan mampir -> http://lonelystarz.blogspot dan http://hakimmahmud.com

    1 Desember 2012 09.27  

    jangan lupa follow blog saya di uncomp.blogspot.com
    terimakasih infonya.
    Salam hangat keluarga blogger....

    3 Desember 2012 16.02  

    Wah aku sudah gak semangat otak-atik blog lagi Kang, Ngeblog aja malah sudah males.
    Kang Enes masih semangat aja nih ya? Salut..!

    8 Desember 2012 10.46  

    Selamat tahun baru kang kumaha damang

    2 Januari 2013 05.29  

    Oh ternyata rahasianya ada disini, selama ini juga gak tahu istilahnya! Akan saya coba!

    5 Januari 2013 20.06  

    keren...
    kunjungi juga http://caisarroberto.blogspot.com/

    10 Februari 2013 10.06  

    kunjungi http://caisarroberto.blogspot.com/
    blog yang seru dan ramai dikunjungi banyak orang.

    10 Februari 2013 10.09  

    makasih infonya lumayan buat nambah ilmu,,good luck aja deh

    16 Februari 2013 23.59  

    cobalah ntar di blog. yang merah-merah itu bisa diatur sesuka hati ya :D

    25 Maret 2013 13.49  

    Wah, mantep nih bikin image hover, komentar juga ya ke blog saya myfamilylifestyle.blogspot.com

    16 Mei 2013 09.13  

    Tambahkan Komentar

    • Dimohon untuk tidak mencantumkan link aktif pada komentar sobat.
    • Gunakan Ruang Tanya pada TabView Menu, jika ingin menanyakan sesuatu yang tidak ada kaitannya dengan artikel di atas.
    Kang eNeS

    Terimakasih atas semua apresiasi yang sobat berikan.

    10 Artikel Terbaru

    10 Artikel Terpopuler