ANIMASI 2 GAMBAR DENGAN HOVER POSITION


Kembali lagi akhirnya saya akan posting yang berkaitan dengan kategori Tutorial Blog dan Css untuk membuat Animasi 2 gambar dengan hover position, postingan ini adalah sebuah request dari salah seorang sahabat saya yaitu Rahman Al Firous pemilik blog Mbah Qopet doi request postingan ini karena terinspirasi dari logo blog Se Avancee.

Jadi sobat yang lain tidak perlu membayangkan lagi apa yang akan saya bahas dihalaman ini karena sudah ada live demonya :D. Sebenarnya tutorial ini hanya memerlukan 1 gambar, tetapi sobat harus membuat 2 gambar tersebut menjadi 1 seperti ini :

<--- Lihat contoh 2 gambar yang saya jadikan satu.
Usahakan gambar agar sama besar dan sama rata kiri-kanan-atas-bawah, agar pada saat gambar disentuh dengan kursor (hover) sobat tidak terlalu sulit untuk mengatur posisinya.

Ok, saya akan memberikan dua demo dengan tambahan transisi -moz-transition-duration: 1s; agar gambar akan terlihat seperti berjalan.









#Putra {
background: url('URL GAMBAR') no-repeat scroll center top transparent;
height: 210px;
margin-top: -39px;
width: 240px;
}
#Putra:hover {
background: url('URL GAMBAR') no-repeat scroll center bottom transparent;
margin-top: -26px;
}



#Tenzhung {
background: url('URL GAMBAR') no-repeat scroll center top transparent;
height: 210px;
margin-top: -39px;
width: 240px;
}
#Tenzhung:hover {
background: url('URL GAMBAR') no-repeat scroll center bottom transparent;
margin-top: -26px;
-moz-transition-duration: 1s;
}



<div id="Putra">
Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>



<div id="Tenzhung">
Disini lahan kosong, silahkan sobat berkreasi sendiri sesuka hati atau boleh juga dikosongkan asal jangan dicoret-coret</div>


Catatan :

* Ubahlah nilai margin pada css apabila posisi gambar belum pas,  karena beda ukuran gambar maka akan beda juga pengaturan nilai margin nya.
* -Moz-transition-duration: 1s berfungsi untuk memperlambat reaksi ketika disentuh kursor (hover), artinya lama durasi pada reaksinya, 1s menunjukan nilai durasi 1 second (detik).
* Ubah nilai height (tinggi) setengah dari tinggi gambarnya, misalnya gambar mempunyai tinggi 500px maka height: 250px; namun itu tidak menjamin kalo gambar tidak sama rata.

Penjelasan lainnya, pertanyaan silahkan sobat salurkan pada komentar dibawah ini.


Comments for this entry

Rama88

ajiibb nih kalo dicoba,, kebetulan ane lagi nyari2 hover buat gambar sob,, xiixixix,, thx for sharing mastah,, btw ane PERTAMAX yaakk.. wkwkkwk

Rama88

ohiya itu yg sama kyk logo ente yg diatas ya sob..? kalo logo di blog ane yg alien itu bisa kagak ya dibikin hover..?

Putra Tenzhung

@ Rama88 : Happy pertamaxxx... kawan :)
bisa doonk... :D

Rama88

wahhh ane belom ngerti bgt dengan CSS .. narok css nya dimana ya sob..? diatas ]]> ya..? atau dimana.? ckckkc,,

Putra Tenzhung

@ Rama88 : Iyaa.. betul disitu.. jangan lupa buat gambarnya sama besar dan sama rata biar ngga terlalu susah ngatur posisinya

Shinobi

ini nih trik yg perlu dicoba ....
coba dlu... moga berhasil dah

A-NX

Trikny bagus sob, nanti aku coba d blog qu...
Moga aja bisa . . .sa . . .

Putra Tenzhung

@ Shinobi, A-NX : Semoga berhasil :D

Zh!nTho

Bagus Nih Ntar kayak punya nya iMroEe juga ya yang geleng - geleng kepala wkwkwkwkwkwkwk

cardiacku

Bisa di coba nih sob..bagus kayaknya hovernya

abufarras

Belum pernah mencoba yang seperti ini sahabat...makasih tipsnya

Cari cari Info

wah.. bisa dijadiin animasi ya sob.. keren jg.. nanti mau belajar lebih dalam ah,,,

Mbah Qopet

Thanks mas udh di posting :D

itu HTMLnya biasanya di taruh apa ?

wkwkwk....bukan Firman Al Firous mas....tpi Rahman Al Firous

saya ganti domain karena urusan biaya :D -> Mbah Qopet's Blog

Mbah Qopet

cara gabungin 2 gambarnya gmN Mas klo pke Photoshop

Bisnis Online Blog

Sangat menarik sob, saya belum faham dengan css boss?peletakannya bagaimana ya?apaa bisa di gunakan untuk header ya?

Green KLOPERER

berkreasi dengan CSS emang asik buat mata n ngasah kreatifitas kita sekaligus ngasah ketekunan kita juga secara ga langsung,,,tp buat saya pribadi agak kesulitan dalam hal implementasi,,maklum newbie abiss...hmmmm tips di atas boleh dicoba nih hihihihi.....

Make You Smile

berkunjung kemari kawan

Mbah Qopet

Tingginya di bagi 2 ya mas ?

Mbah Qopet

CSS Header sy isinya gini mas :

#header-wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(http://3.bp.blogspot.com/_rLYhkzmU7RY/TDvdaQEQJhI/AAAAAAAAAAM/tQr4P8Rb7AQ/s1600/line.gif) repeat-x scroll left bottom;
height:119px;
width:900px;
}
#header-inner {
background-position:center center;
margin-left:auto;
margin-right:auto;
}
#header {
color:#000000;
text-align:left;
}
#header h1 {
font-family:'Segoe UI', Calibri, 'Myriad Pro', Myriad, 'Trebuchet MS', Helvetica, sans-serif;
font-size:50px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:bold;
letter-spacing:-1px;
line-height:normal;
margin:5px 5px 0;
padding:15px 20px 3px 0;
text-transform:bold;
}
#header a {
color:#000000;
text-decoration:none;
}
#header a:hover {
background:#fafafa;
color:#91080b;
text-shadow:1px 0 0 #fff,-1px 0 0 #fff,0 1px 0 #fff,0 -1px 0 #fff,1px 1px 2px #000;
}
#header .description {
color:#999999;
font-family:georgia;
font-size:12px;
font-size-adjust:none;
font-stretch:normal;
font-style:italic;
font-variant:normal;
font-weight:normal;
letter-spacing:0;
line-height:normal;
margin:0 5px 5px;
max-width:700px;
padding:0 20px 15px 0;
text-transform:none;
}
#header img {
margin-left:auto;
margin-right:auto;
}

itu yg di ganti yg mna mas...

Putra Tenzhung

@ Zh!nto : wkwkwk.. iya yaa.. haha

@ cardiakcu : silahkan.. :)

@ abufarras : Ok sama-sama..

Putra Tenzhung

@ Cari cari Info : Iyaa.. sukses belajar nya ya kang.. :D

@ Bisnis Online Blog : Peletakkan untuk css nya di atas kode ]]> , untuk htmlnya tergantung posisinya mau dimana? kalo misalnya buat diheader taronya di css #header h1.

@ Green KLOPERER : Iyaa betul banget soob.. sama saya juga baru belajar :D

Putra Tenzhung

@ Mbah Kopet : Kalo ente pengen buatnya di header, ya ngga usah dibuat lagi htmlnya kan sudah ada,,
tinggal backgroundnya diletakin di #header h1, jangan lupa buat kode css baru #header h1:hover

Musa Khairul Umam

Ow gitu ya tapi gimana kalo hovernya itu terdiri dari satu gambar kayak header punya ente

Putra Tenzhung

@ Musa Khairul Umam : Itukan memang menggunakan 1 gambar, sma saja kya header ane.. cuma pada hover harus ada background itu lagi namun posisinya beda.
Center Top
Center Bottom

XOOM

Oalah ternyata caranya begini ya.. saya sering menjumpai gambar merek yang punya efek hover kaya gini di blog2 besar. tapi kalo merek itu kan gambarnya ada beberapa warna gan, gimana itu?

Putra Tenzhung

@ XOOM : emangnya ada berapa warna?? intinya gambar hanya ada 1 namun obectnya lebih dari satu dan berbeda-beda warna, mereka bisa juga menambahkan css hover ,active, focus, visited.

Cek Info

kalo pake font bisa kagak, wkwkw :p

sory baru bisa berkunjung :D

Dynamic View Template

CSS makin keren, sayang blm banyak browser yang mendukung terutama IE :(

A-NX

Kunjungan ! ! !
ditunggu entri barunya . . .
oiya, ada yg baru nh d blog q sob
KEEP & HAPPY BLOGGING

Mbah Qopet

sep..thanks dh di jawab mas :D

Mbah Qopet

g bsa mas...di belakangnya malah muncul Title yg pke Font

Cek Info

ha pake font isa kagak?

Putra Tenzhung

@ Mbah Qopet : Yaa jelaslahh di css ente juga kan ada font-family n font-size nya berarti pada elemen htmlnya terdapat text.. coba dikoreksi lagi bagian headernya

@ Cek Info : Yaa bisa-bisa ajaa.. tapi itu bukan diluar topik ini.. lebih bagus juga pake gambar..

Bayu Aldi Yansyah

manteb nihh ,, thanks yak sob!!

katils

ampun dwah masalah css nyerah kawan nximax ae ampun dwah masalah css nyerah kawan nximax ae

Mbah Qopet

g jadi pke gambar mas...saya dh nemu Font yg Cocok maaf dah ngerepotin sebelumnya :D

Mbah Qopet

MAS...dapat Award dari saya...Visit untuk Cek DI TERIMA ya

Cek Info

berkunjung dan dtunggu updateanny

BlogS of Hariyanto

sangat banyak tambahan wawasan dan ilmu yang saya bisa peroleh saat berkunjung di blog ini :)
terimakasih kawan sudah berbagi

Rama88

kapan ya bisa update lagi,, :'( where'd U go friend..? :'(

BlogS of Hariyanto

hadir lagi kawan, akhir pekan ceria :)

digital boy

mantab gan postingannya n I always comeback!!!

Mbah Qopet

kapan Update nya mas, di tunggu + Link exchange saya di ganti ya http://mbahqopet.blogspot.com

Aldio Blog

keren nie, boleh jg ni coba, thanks gan :)

Shinobi Caemk

bingung banget soal ginian ... :D

Zh!nTho

wah belum update2 lagi nih

Bisnis Online Blog

menyimak kembali lagi ke sini, punya saya sudah jadi tapi mau kembali lagi ke langkah jadi bingung lagi ^_^

Ohya sob ada undangan untuk para blogger, silahkan di lihat di gubuk BOB

Cek Info

masBRO videony uda sy update silahkan nonton kembali

How To Be Vegetarian

bagus jga siih
cma memperlama blog ngak yah?
(mksud saya pasti melambatkan tpi selambat ap, sangat lambat or normal2 aja, thx)

kunjungi saya balik yah

Putra Tenzhung

@How To Be Vegetarian : sebenernya kalau masalah memperlambat loading blog itu tergantung dari gambarnya itu sendiri, kalau anda menggunakannya cuma untuk logo blog itu sama aja kya pake logo biasa. Intinya cuma pada size gambarnya :)

vira

hii salam kenal iya dari vira .. :)
jangan lupa mapir keweb vira iya di http://www.rumahkiat.com/ vira mau berbagi pengalaman nih.:)
wah bagus juga iya blog ka2 ... ^_^ good luck iya.....
SALAM BLOGER INDONESIA..:)

Farixsantips

wahh keren sekalian ada demo livenya :d mantap om tenzung~

sukague.com

kereeeen sob

Liandri eko

yang ini juga keren sob, nanti di coba ahh

kehidupanremaja

super mantab luar biasa animasi ,langsung coba dulu ach,,, thamhk's mas bro

Putra Tenzhung

@ Farixsantips : Hahaha iya biar bisa nyobain langsung :D

@ sukague.com, Liandri eko : Iyaa.. Goodluck

@ kehidupanremaja : Siipp.. semoga berhasil broo.. :D

Mawardi

terima kasih banyak pelajaran animasinya

Farixsan Quilicuor (Faris Hardiyanto 177)

waktu itu effectnya blm keliatan, tetapi sekaarang udah keliatan :D

randy oktaran

brow tenzhung kayaknya serius nggarap ilmu css3 nih,makin sip aja nih :D

Share Our Knowledge

saya pernah mencobanya sob, dari sini juga tutorialnya,, dan hasilnya bagus. :)
thnks sob, infonya bagus bnget ini.

Share Our Knowledge | Software Akuntansi
{http://infotips-rama.blogspot.com/2011/12/software-akuntasi.html}

Cirebon-Cyber4rt

keren gan tutorialnya... :)

Udi Nugroho

Kalau tambah link gimana gan?? trus gambarnya banyak gitu??
bisa sesimpel itu gx??

hutanmaya

kunjungan

Era Movie

Wih sip nih kalo di reapkan di themes yang minimalis dan themes hoby.. good job bro :)

IBU RAHMA DI JAWA TIMUR

kami panjatkan syukur dan terima kasih kepada AKI SUBALA JATI,saya hanya pedagang tomat di pasar yang penghasilannya tidak seberapa,tapi setelah kami dapat nomornya AKI di internet kami coba-coba menghubunginya dan minta bantuannya melalui angka-angka goipnya yang di jamin tembus,angka yang AKI berikan 4d [6194] ternyata benar-benar terbukti,sekali lagi terima kasih AKI walaupan cuma 4d nya kami sangat bersyukur di bandingkan hasil dagangan sehari-hari yang pendapatannya tidak seberapa,bagi anda yang ingin angka goip hasil ritual yang di jamin tembus hbg AKI SUBALA JATI di nmr; 082=318=816=444,angka yang di keluarkan AKI SUBALA JATI di jamin 100% kemenangan,terima kasih

klik http://angkaramalanakysubalajaty.blogspot.com

kami panjatkan syukur dan terima kasih kepada AKI SUBALA JATI,saya hanya pedagang tomat di pasar yang penghasilannya tidak seberapa,tapi setelah kami dapat nomornya AKI di internet kami coba-coba menghubunginya dan minta bantuannya melalui angka-angka goipnya yang di jamin tembus,angka yang AKI berikan 4d [6194] ternyata benar-benar terbukti,sekali lagi terima kasih AKI walaupan cuma 4d nya kami sangat bersyukur di bandingkan hasil dagangan sehari-hari yang pendapatannya tidak seberapa,bagi anda yang ingin angka goip hasil ritual yang di jamin tembus hbg AKI SUBALA JATI di nmr; 082=318=816=444,angka yang di keluarkan AKI SUBALA JATI di jamin 100% kemenangan,terima kasih

klik http://angkaramalanakysubalajaty.blogspot.com

Leave your comment

Thank you.