Memperbesar bidang gambar dengan menggunakan CSS

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:

html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

 http-equiv="Content-Type" content="text/html; charset=utf-8" />

 name="description" content="" />
 name="keywords" content="" />



 href="#"> src="kelinci.jpg" alt="Kelinci" width="374" height="304" />

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 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

Tiap-tiap gambar memiliki ukuran yang berbeda-beda karena itu untuk menengahkannya juga berbeda-beda ukurannya.

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.