yes
no
10/Promotion/slider
no

Membuat Zoom Gambar dengan CSS

Tidak ada komentar
Pernah melihat Zoom gambar di halaman website? Zoom gambar berfungsi untuk melihat gambar lebih detail, sehingga gambar terlihat lebih jelas dan lebih besar ketika kursor mouse diarahkan/berada diatas gambar. Zoom gambar dapat dibuat dengan Javascript, CSS dan bahasa pemrograman lainnya. Bahasa pemrograman tersebut dapat di pelajari di tempat Kursus Komputer atau IT Training Center. Computer First adalah tempat Kursus Komputer yang membuka kursus bahasa pemrograman tersebut.

Pada artikel ini, penulis akan membuat zoom gambar dengan CSS. Untuk membuat zoom gambar tersebut dibutuhkan skrip HTML, CSS dan gambar. Skrip CSS memuat kode progam untuk memperbesar gambar, yang buat secara terpisah maupun digabung dengan skrip HTML. Skrip HTML digunakan untuk memanggil file CSS eksternal atau sebagai tempat untuk menyelipkan skrip CSS, sedangkan gambar digunakan sebagai objek yang akan diberi efek zoom.

Jika skrip CSS dibuat secara terpisah dengan dokumen HTML, maka skrip tersebut dipanggil pada dokumen HTML. Sedangkan jika skrip CSS digabung dengan skrip HTML, maka skrip CSS diselipkan dibagian kepala dari skrip HTML yang letaknya diantara tag <head>….</head>, tepatnya dibawah tag <title>...</title>.  Bagaimana cara membuat zoom gambar dengan CSS...?

Pembuatan zoom gambar dengan skrip CSS yang dibuat terpisah dengan skrip HTML adalah pembuatan zoom gambar secara eksternal. Pada metode ini skrip CSS dipanggil/di link pada dokumen HTML. Sedangkan pembuatan zoom gambar dengan skrip CSS yang digabung/diselipkan pada dokumen HTML adalah pembuatan zoom pada gambar secara internal.

Dengan adanya efek zoom pada gambar, maka terdapat variasi pada website, sehingga  website tidak terasa monoton. Adapun skrip untuk membuat efek zoom gambar secara internal dan eksternal yaitu sebagai berikut :

1.  Eksternal CSS :
      Skrip CSS : zoom.css(disimpan di folder css)
      a {
      -o-transform:scale(1,1);
      -o-transition-timing-function:ease-out;
      -o-transition-duration: 0.1s;
     
      -webkit-transform: scale(1,1);
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 0.1s;
     
      -moz-transform: scale(1,1);
      -moz-transition-timing-function: ease-out;
      -moz-transition-duration: 0.1s;
}
a:hover {
      display:block;
      -o-transform:scale(2,2);
      -o-transition-timing-function:ease-out;
      -o-transition-duration: 0.1s;
     
      -webkit-transform: scale(2,2);
      -webkit-transition-timing-function: ease-out;
      -webkit-transition-duration: 0.5s;
   
      -moz-transform: scale(2,2);
      -moz-transition-timing-function: ease-out;
      -moz-transition-duration: 0.1s;
      position: relative;
}
     
Skrip HTML : zoom_external.html
<html>
<head>
               <title>Untitled Document</title>
<link href="css/zoom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<br>
<br>
<br>
<br>
<center>
               <a href="#"> 
               <img src="gambar/final_logo-01.jpg" width="300" height="150"/>
               </a>
</center>
</body>
</html>

2.   Internal CSS :
Skrip : internal.html
<html>
<head>
             <title>Zoom Image dengan Internal CSS</title>
<style type="text/css">
img.zoom {
                -o-transform:scale(1,1);
                -o-transition-timing-function:ease-out;
                -o-transition-duration: 0.1s;
               
                -webkit-transform: scale(1,1);
                -webkit-transition-timing-function: ease-out;
                -webkit-transition-duration: 0.1s;
               
                -moz-transform: scale(1,1);
                -moz-transition-timing-function: ease-out;
                -moz-transition-duration: 0.1s;
}
img.zoom:hover {
                display:block;
                -o-transform:scale(2,2);
                -o-transition-timing-function:ease-out;
                -o-transition-duration: 0.1s;
               
                -webkit-transform: scale(2,2);
                -webkit-transition-timing-function: ease-out;
                -webkit-transition-duration: 0.5s;
      
                -moz-transform: scale(2,2);
                -moz-transition-timing-function: ease-out;
                -moz-transition-duration: 0.1s;
                position: relative;
}
</style>
</head>
<body>
<center>
                <img class="zoom" src="gambar/final_logo-01.jpg" width="300" height="150"/>
</body>
</html>

Jika file HTML dijalankan/dipanggil di web browser dan kursor mouse diarahkan ke atas gambar/berada diatas gambar, maka gambar akan membesar sesuai dengan skala pembesaran yang diinginkan.

Gambar Awal : 


 



Gambar Setelah di Zoom:








Demikian artikel ini penulis buat, mudah-mudah bermanfaat untuk para pengunjung blog Computer First. Jangan lupa dicoba ya......dan beri komentarnya......
author profile image
Abdelghafour

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Tidak ada komentar

Posting Komentar

no
Computer First - First Choice in IT Training Center - menyediakan jasa pelatihan Kursus Komputer di Jakarta sejak dari usia dini yaitu sejak anak-anak sampai dengan dewasa. Computer First berdiri pada tahun 2001, Visi Computer First ingin menjadi First Choice in IT Training Center melalui pendidikan dan pelatihan komputer yang berkualitas terbaik [Computer First Indonesia] (http://computerfirst.co.id/images/logo/logo1.png)