Three Amazing Hover Effect for Image

Lagi-lagi dapat artikel tentang hover image Sekarang kita akan bermain dengan kerumitan variabel CSS background images properties! Pada dasarnya pelajaran CSS background-position terlihat mudah. Jika image yang digunakan satu full mudah, tapi bagaimana jika image yg ditampilkan lebih dari satu? Dari beberapa background image dirangkai menjadi satu kesatuan yg di atur dengan posisi image, di tambah dengan effect hover dan tentunya CSS3 coded b-)
Memang sedikit sulit jika diterangkan dengan kata-kata ilmu CSS itu, lebih baik lihat saja deh langsung demo dan tutorialnya :d

Curtain Effect

Ada Apa Yach!

#curtains {
color: #333;
margin: auto;
width: 400px;
height: 300px;
border: 5px ridge #eee;
transition-duration: 2s;
transition-timing-function: ease-out;
transition-property: background-position;
background: url(IMAGE-GORDEN-KIRI-200px x 300px) 0 0 no-repeat, url(IMAGE-GORDEN-KANAN-200px x 300px) right top no-repeat, url(IMAGE-GORDEN-Di-DALAM-400px x 300px) center center no-repeat;
}
#curtains:hover {
transition-duration: 2s;
background-color:#A90101;
color: rgba(255,255,255,.2);
transition-timing-function: ease-out;
transition-property: background-position;
background-position: -201px 0, 405px 0, center center;
}

Planing HTML<div id="curtains"> </div>

Jangan lupa isikan link image dengan resolusi yg sudah disesuikan width dan height pada rumusan kode CSS! Tambahkan dan aturlah variabel CSS sesuai dengan kebutuhan.

Collapsing Image Wipe

Ada Apa Yach!!!

Sekilas seperti 2 image kan, padahal itu terdiri dari 6 image! 5 img yg membangun efek tarikan ke kiri, 1 img background dalam.

#sengklek {
height: 300px;
width: 400px;
color: #fff;
margin: auto;
border: 5px ridge #0cf;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background: url(LINK-IMAGE1.JPG) 0 0 no-repeat, url(LINK-IMAGE2.JPG) 85px 0 no-repeat, url(LINK-IMAGE3.JPG) 171px 0 no-repeat, url(LINK-IMAGE4.JPG) 257px 0 no-repeat, url(LINK-IMAGE5.JPG) 325px 0 no-repeat, url(LINK-IMAGE-BACKGROUND-DALAM.JPG) center center no-repeat;
}
#sengklek:hover {
background-color: #8BF1F3;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background-position: -90px 0, -110px 0, -130px 0, -150px 0, -170px 0, center center;
}

Markup HTML<div id="sengklek"></div>

Hal yg perlu di ingat untuk membangun trick ini adalah, panjang & lebar gambar yg kemudian di potong² dengan skill photoshop kalian. Nominal yg ada (background-position) sangat berpengaruh pada hasil jadi.

Segmented Effect

Ada Apa Yach!!!

#sedeng {
height: 300px;
width: 400px;
color: #0f0;
font-size: 150%;
font-weight: bold;
margin: 5px auto;
border: 5px ridge #0cf;
background: url(LINK-IMAGE1.PNG) 0 0 no-repeat, url(LINK-IMAGE2.PNG) 85px 0 no-repeat, url(LINK-IMAGE3.PNG) 171px 0 no-repeat, url(LINK-IMAGE4.PNG) 257px 0 no-repeat, url(LINK-IMAGE5.PNG) 325px 0 no-repeat, url(LINK-IMAGE-BACKGROUND.PNG) center center no-repeat;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
}
#sedeng:hover {
background-color: #8BF1F3;
transition-duration: 1s;
transition-timing-function: ease-out;
transition-property: background-position;
background-position: 0 -301px, 81px 301px, 161px -301px, 241px 301px, 321px -301px, center center;
}

Kode HTML<div id="sedeng"></div>

Trik ini pun membutuhkan kepandaian sama dengan yg sebelumnya. Nominal akan berpengaruh sekali pada width & height image. Silahkan dipelajari sendiri saja, dan ide ini dapat dari coboldinosaur.com/pages/CSS_Background_Images.html Acak-acak kategori yg ada disana ;)
Happy coding \m/