HOMEArtikel CSS (Cascading Stylesheet)
- Home
- » CSS (Cascading Stylesheet)
- » Memperbesar bidang gambar dengan menggunakan CSS
- » CSS (Cascading Stylesheet)
Memperbesar bidang gambar dengan menggunakan CSS
Ditulis oleh Dhimas Ronggobramantyo
Kategori: CSS (Cascading Stylesheet)
Dibaca 12804 kali
Meneruskan artikel saya yang kemarin mengenai mengubah gambar pada mouse hover, dengan sedikit pengembangan dan trik maka kita bisa membuat bidang gambar menjadi besar ketika mouse hover. Sebelum kita lanjut anda lihat dulu apa yang akan kita buat disini.
Kode HTML
Oke, anda sudah tahu apa yang akan kita buat, sekarang akan saya ajarkan caranya. Kita hanya akan menggunakan CSS saja. Pertama-tama kita buat kode HTML nya terlebih dahulu, buatlah file HTML simpan dengan nama thumb.html, dan isilah dengan kode berikut ini:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Memperbesar bidang gambar dengan mouse hover</title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<style type="text/css" media="all">@import "style.css";</style>
</head>
<body>
<a href="#"><img src="kelinci.jpg" alt="Kelinci" width="374" height="304" /></a>
</body>
</html>
Jika anda perhatikan, tidak ada yang aneh dengan kode HTMLnya, itu hanya kode HTML biasa saja dimana kita akan meload CSS pada file style.css. Dan didalam kode HTML nya kita tampilkan gambar yang akan kita beri efek. Jangan lupa untuk gambarnya silahkan anda save gambar kelinci dibawah ini.
Kode HTML
Sekarang, kita buat keajaibannya melalui CSS. Buatlah file style.css dan isilah dengan kode berikut ini:
a{
display:block;
width:250px;
height:200px;
overflow:hidden;
position:relative;
z-index:1;
float:left;
border:2px solid #000;
}
Pertama-tama kita akan membahas CSS untuk tag a terlebih dahulu. Kita spesifikasian panjang dan tinggi bidang gambar yang akan terlihat oleh tag a. Disini kita mengatur panjangnya 250px dan tingginya 200px, width:250px dan height:200px. Sekarang kita sudah memiliki bidangnya segitu, tapi gambar diluar bidang masih terlihat untuk itu perlu kita tutup kelebihannya (overflow) dengan overflow:hidden. Jangan lupda untuk menambahkan position:relative agar posisi tag <a> mengikuti gambarnya. Jika anda lihat maka gambar yang ditampilkan sekarang sudah lebih kecil tetapi belum menengah, masih diambil dari sudut kiri atas (titik 0,0). Sekarang kita akan menengahkannya.
Oke, kita sudah berhasil memotong sebagian, sekarang tambahkan kode CSS berikut ini:
a{
display:block;
width:250px;
height:200px;
overflow:hidden;
position:relative;
z-index:1;
float:left;
border:2px solid #000;
}
a img{
position:absolute;
top:-42px;
left:-70px;
border:2px solid #000;
}
Untuk menengahkannya, kita perlu menggeser tampilan images kita. Dalam contoh gambar saya ini saya menggeser imagesnya kekiri -70px dan keatas -42px, top:-42px; dan left:-70px;. Jangan lupa jika kita menggeser posisi kita perlu mengubah posisi gambarnya menjadi position:absolute
Jika anda lihat sekarang posisi gambarnya sudah ditengah. Sekarang kita tinggal membuat efek mouse hover sehingga gambarnya kelihatan semua. Tambahkan kode CSS berikut ini:
a{
display:block;
width:250px;
height:200px;
overflow:hidden;
position:relative;
z-index:1;
float:left;
border:2px solid #000;
}
a img{
position:absolute;
top:-42px;
left:-70px;
border:2px solid #000;
}
a:hover{
overflow:visible;
z-index:1000;
border:2px solid #000;
}
Apa yang kita lakukan dengan hover? tentu saja hanya membuat overflownya menjadi terlihat lagi dengan perintah overflow:visible. Untuk lebih jelasnya silahkan perhatikan ilustrasi gambar berikut ini.
Mudah kan, selamat mencoba dan tentu saja kode diatas kompatibel disemua browser.
Komentar [27]
Dikirim oleh muhammad nur pada 19 Mei 2008 05:20:13 WIB
macashih
Dikirim oleh adi pada 22 Mei 2008 10:38:06 WIB
kalau untuk zoom bisa ga menggunakan css ??
Dikirim oleh Putu niki pada 31 Mei 2008 06:36:12 WIB
Ijin artikel digunakan untuk pembelajaran SMK
Dikirim oleh Ami pada 04 Agustus 2008 03:10:29 WIB
Mas Dhimas, makasih ya tutorialnya..., saya sedang mempelajari CSS, ternyata banyak ya yang bisa dilakukan oleh CSS.
Terimakasih banyak
Dikirim oleh eko kuncoro pada 14 Agustus 2008 01:15:50 WIB
bagus om artikel nya ... tetep posting yang baru yeee ane dukung dah pokoknya ....
best regards
www.ekokuncoro.com
Dikirim oleh Odenxs_85 pada 26 Agustus 2008 07:52:47 WIB
Thanxs semua artikelnya,bner2 berguna buat ngerjain tugas q.pokoknya T.O.P dah
Dikirim oleh putri arini pada 17 September 2008 08:51:12 WIB
lutunha gambar nya!makasih ya !artikel nya bagus buangettt!
Dikirim oleh putri arini pada 17 September 2008 08:51:27 WIB
lutunha gambar nya!makasih ya !artikel nya bagus buangettt!
Dikirim oleh toni pada 21 Oktober 2008 05:27:11 WIB
tutorialnya mudah di mengerti,bagus bangets
makasih ya 
Dikirim oleh ungke pada 15 November 2008 08:29:57 WIB
hai gimana cara muda untuk belajar css dan php
Dikirim oleh handoyo pada 16 Desember 2008 02:52:07 WIB
Thanks buat smua tutornya mas..Maju trus mas...Kalo bisa,ajarin donk cara buat menu sperti www.brookechase.com....
Dikirim oleh edi pada 18 Desember 2008 11:26:55 WIB
bagus sekali
Dikirim oleh ncut_aja pada 16 Januari 2009 11:13:39 WIB
wuih dhimas thx yaaa keren bgt tuh..^^
Dikirim oleh aan pada 16 Januari 2009 03:36:55 WIB
Thanks mas saya baru belajar css nih.. jadi banyak tambahan referensi belajar..
Dikirim oleh amanda pada 01 Februari 2009 01:35:47 WIB
bagussssssssssssssssssss. gooooooooooooooooodddddddddddddddd and uyyyyyyyyyyyyyyyyyyyy mannnntappp
Dikirim oleh anto pada 05 Februari 2009 04:33:20 WIB
trims ya mas tambah-tambah ilmu
Dikirim oleh raden mas pada 24 Februari 2009 08:29:01 WIB
yang ini juga amat sngat membantu saya dalam mengerjakan tugas di sekolah.
thank you to you
Dikirim oleh gvhkvhghk pada 03 Mei 2009 09:26:43 WIB
jbgkmbkbhkvhgk
Dikirim oleh SonSoft pada 20 Mei 2009 12:42:26 WIB
Mas dikembangkan lagi buat tutorial memunculkan form yang bisa digeser2 mas.. seperti jendela chat di YM nya yahoo mail, btw artikelnya bagus2 
Dikirim oleh Jalaluddin pada 26 Mei 2009 02:18:59 WIB
Thanks Banget Ya...... ilmunya
Dikirim oleh indra sukmana pada 18 Juli 2009 01:02:39 WIB
thanks bgt
Dikirim oleh asro pada 27 Juli 2009 04:01:37 WIB
thnks man
Dikirim oleh Quwat pada 28 Agustus 2009 01:31:11 WIB
Om Terima kasih
Dikirim oleh pipenk pada 10 September 2009 10:31:19 WIB
gambar bagus and lucu
Dikirim oleh fiki pada 03 November 2009 12:53:03 WIB
bagus banget tutorialnya
Dikirim oleh eNry pada 07 Desember 2009 12:35:03 WIB
geser gambar pake mouse bs g bro?
Dikirim oleh Jig0r pada 21 Januari 2010 03:14:48 WIB
mas bisa bikin kode OnMouseOver ga
yang jika link nya kena pointer mose otomatil langsung menuju ke web orang gitu
RSS Feeds
Valid XHTML Strict