Recent Post

Sponsored

Labels

addressbook Membuat Image Hover Dengan CSS

Diposting oleh dev | , , | 16 komentar »

CSSSudah satu minggu lebih saya tidak bisa online karena modem Sierra 881U yang saya gunakan mendadak rusak. Akhirnya belakangan ini saya lebih sering mengoprek localhost sambil mengotak-atik script CakePHP untuk sebuah project situs yang sedang saya kerjakan. Saat sedang membuat tampilan situs di localhost, saya jadi teringat salah satu cara membuat Image Hover. Pada postingan kali ini saya akan sedikit berbagi mengenai cara membuat Image hover menggunakan kode CSS untuk memperindah tampilan blog teman-teman.

Fungsi dasar hover adalah untuk merubah tampilan sebuah link pada saat link tersebut disentuh oleh cursor, teman-teman pasti sering melihatnya pada sebuah text link (anchor text), biasanya sebuah text link akan berubah warna pada saat link tersebut tersentuh oleh cursor. Image Hover memiliki fungsi yang sama yaitu merubah gambar pada saat gambar tersebut disentuh oleh cursor. Untuk lebih jelasnya silahkan lihat contohnya dibawah ini:

DEMO:


Biasanya Image hover dibuat dengan menggunakan kode javascript agar perubahan gambar lebih halus, sayangnya terlalu banyak menggunakan javascript pada blog akan membuat loading blog kita menjadi lebih berat. Oleh sebab itu di bawah ini akan saya terangkan bagaimana cara membuat image hover dengan menambahkan sedikit kode CSS pada halaman edit HTML kita.

1. Buka halaman edit HTML blogger
Dashboard >> Layout >> edit HTML

2. Copy code CSS dibawah ini dan paste tepat di atas kode ]]></b:skin> pada halaman edit HTML blogger.
a.pic .image2{display:none}
a.pic:hover .image1 {display:none}
a.pic:hover .image2 {display:inline}

3. Klik "Save Template"

Sekarang, untuk menampilkan Image Hover kita memerlukan 2 buah image yang berbeda kemudian memanggil kode CSS tersebut dengan menambahkan class pada HTML image yang kita punya, silahkan lihat contoh kodenya dibawah ini:
<a class="pic" href="LINK YANG DITUJU"><img class="image1" src="URL IMAGE ASLI"/> <img class="image2" src="URL IMAGE HOVER"/></a>
Buat yang terbiasa dengan kode CSS bisa menambahkan beberapa kode CSS pada class image1 dan image2 agar tampilan hover lebih hidup seperti padding margin dan sebagainya, silahkan berkreasi sepuasnya :)

Related Posts by Categories

Silahkan klik di sini untuk membaca melalui feed reader anda. Atau masukkan alamat email anda di kolom dibawah ini untuk berlangganan artikel DevBook.net langsung ke alamat email anda.

feed

Page copy protected against web site content infringement by Copyscape

Ada 16komentar ke “Membuat Image Hover Dengan CSS”
bangas said...
 date:

blognya keren bangen..soft dan cepat aksesnya ...mau belajar bisa toh....

dev said...
 date:

@bangas: makasih mas..kita sama2 belajar aja ya saya juga masih belajar :)

KangBoed said...
 date:

Selamat Tahun Baru
Semangat Baru
Menemukan Diri Sebenar Diri
Meraih Kehidupan Sejati..

:lol: :lol: :lol: :lol: :lol:

RAIHLAH “JATI DIRI MANUSIA”.. untuk

MENGEMBALIKAN JATI DIRI BANGSA INDONESIA

Salam Cinta Damai dan Kasih Sayang ‘tuk Sahabatku terchayaaaaaank

I Love U fullllllllllllllllllllllllllllllll

KangBoed said...
 date:

Selamat Tahun Baru 2010
Hati Hati ARUS PERCEPATAN menimpa Nusantara
Sahabat semuanya tahun 2009 sudah di belakang kita..
DEMI MASA..
DEMI WAKTU..
WAL ASRI..
semuanya sudah kita lalui bersama sama..
Canda tawa riang Gembira Tangis suka duka nan pilu telah berlalu..
semua telah kembali ke alam LAMUNAN TUHAN..
Tahun 2010 akan datang Menyongsong kita semuanya..
Tahun 2010 akan segera kita jalani setapak demi setapak..
Semua itu masih menjadi RAHASIA TUHAN..
Sesungguhnya Masa yang akan Datang Masih Berada dalam Sirr nya TUHAN..
Bahkan Sirr/ubun ubun manusia selalu berada dalam Genggaman Tangan Tuhan
Sesungguhnya Hidup Manusia berada dalam Genggaman Tangan Tuhan..
Sahabat.. mari kita diam sejenak melamun di alam lamunan Tuhan..
Membuka kembali perjalanan Tahun 2009 yang baru kita lalui bersama sama..
Diam dalam tafakur perenungan diri yang dalam..
Bukankah waktu yang lalu adalah guru untuk ESOK lebih baik
Bukankah kita harus mengambil hikmah perjalanan kemarin demi perbaikan
Sahabat Jangan Sia Siakan Waktu sebelum waktu berbalik melindas kita
Mari kita benahi diri kita masing masing dan belajar serta terus belajar
Menemukan Tujuan Hidup Manusia dalam Kesadaran Sepenuhnya
Walau kemungkinan tahun 2010 akan berjalan dengan berat..
Keadaan mungkin semakin tiada menentu dan semakin sulit saja
Fenomena alam dan gejolaknya semakin kerap bertambah melanda
Tapi biarlah semua itu menjadi pelajaran untuk ber SEGERA
Segera melangkah membenahi diri.. diri lahir dan diri bathin..
Membenahi Perjalanan Lahiriah dan Perjalanan Bathiniah yang terabaikan
Ingat sahabatku semuanya sekali lagi bahwa dirimu meliputi lahir dan bathin
Jika tiba Saat dan Waktunya maka diri lahir akan kembali kepada tanah
Tetapi sekali lagi INGAT !!! karena diri Bathin akan bangkit melanjutkan perjalanan
Diri Bathin akan menuai hasil apa yang selama ini kita tanam dan perjuangkan
Menangis DARAHpun percuma saja jika kau lalai selama di sini
Sahabat mulailah berfikir untuk menata kehidupan bathin kita masing masing
Sebab ketahuilah kehidupan bathin adalah sebuah perjalanan spiritual panjang
Diri Lahiriah melambangkan nilai manusia di hadapan manusia lainnya..
Sedangkan Diri Bathiniah melambangkan Nilai Manusia dihadapan Tuhan..
yayaya.. Sesungguhnya NILAI MANUSIA dihadapan ALLAH ada di sini..
Sahabat biarlah tahun 2010 menjadi tahun kebangkitan bagi kita semua
Tahun 2010 menjadi Momentum Bangkitnya Kesadaran dalam Diri
Mari Sahabatku semuanya gapailah esok lebih baik dan lebih baik lagi
Sekali lagi MELANGKAHLAH SEGERA.. jangan SIA SIA kan waktumu..
Sebelum TERLAMBAT
Selamat Tahun Baru 2010

febriyanto said...
 date:

keren tutorialnya....
coba2 dh ah....

dev said...
 date:

@Kang Boed: Selamat tahun baru juga kang..

@febriyanto: Silahkan mas, mudah2an berhasil, kalo ada kesulitan silahkan tanyakan disini ya :)

benehal said...
 date:

Untuk wordpress? bisa di posting juga dong...heheh, a good articles..

dev said...
 date:

@benehal: Buat di WP sama aja mas, masukin css nya di style.css
buat kode HTML-nya sama aja karena PHP bisa membaca kode HTML juga, jadi tinggal dipasang di tempat kita mau memunculkan image hovernya..

Beben said...
 date:

hmmm...mantap...hhohohoho
semangat ah ;)

kwangkxz said...
 date:

Terimakasih infonya yang sangat bagus sobat.

jacky said...
 date:

wahhh bermanfaat nich ...
makasich

Anonymous said...
 date:

Tq. Sangat membantu.. :D

Bayou said...
 date:

Thank you very much! It works very well in my blog. XD

cytotec said...
 date:

ane coba kok gak bisa ya mas?

yusuf twenty said...
 date:

buat ngilangin garis bawahnya itu gimana??

halim said...
 date:

makasih mas


leave comment
back to top
comment notes

Post a Comment

devbook.net