Cara membuat efek membesar pada gambar

Cara membuat efek membesar pada gambar

Memberikan efek membesar pada gambaradalah salah satu cara menjadikan webatau blog tampil menarik. Biasanya digunakan pada web atau blog yang banyak menampilkan gambar, apalagi sebuah web atau blog yang berkonten toko online, berbasis desain interior,eksterior,dekorasi, dll.

Untuk membuat efek membesar pada gambar saya akan menggunakan fitur CSS, yaitu dengan memanfaatkan atribut transition, atribut hover dan atribut transform:scale.
Silahkan anda lihat contoh gambar dibawah ini. Anda bisa coba meletakkan pointer mouse diatas gambar, maka gambar tersebut langsung membesar.

OK...., bila anda berminat, silahkan anda ikuti langkah - langkah berikut :

1. Login ke blogger dengan ID anda.
2. Klik Rancangan.
3. Dan KLik tab Edit HTML. 

4. Cari kode di bawah ini atau yang mirip dengan kode ini :

</head>

5. Copy kode di bawah ini dan taruh sebelum kode </head> :

<style type="text/css">
#zoomimage div {
height:100px;
width:100px;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;}
#zoomimage div:hover {
padding-top:0;
padding-left:0;
padding-top:0;
padding-right:0;
-webkit-transform:scale(3,3);
-moz-transform:scale(3,3);}
#zoomimage img {
border: 3px solid #D8D8D8;
border-style:double;
}
</style>

Catatan :

• Anda bisa mengatur posisi gambar pada saat membesar, baik kearah kekiri, kekanan, dan kebawah. Anda tinggal mengganti nilai "0" pada kode - kode :

padding-top:0; 

padding-left:0; 

padding-top:0; 

padding-right:0;

6. Simpan Template.
7. Langkah selanjutnya, anda tinggal copy kode dibawah ini dan anda bisa taruh kode gambar ini pada gadget atau akan dipasang pada artikel post anda untuk menampilkan gambar dengan efek membesar, silahkan ... itu terserah anda.

<center>
<div id="zoomimage">
<div class="hover"><a href="http://www.carabuatwebgratis.com" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik4MhCsJbu97O9WqmCc-3wqK_SvVpBl_Iez9i1YDQBXHQFsfAo0ERD3V262wGf6mX2DjlnW6EzyrgYd2wFzPJfYJY0xXzvWMH1w1KHDb34s62JN0poswDo_m-DaOBOAEQS_Bd3em9V-0lG/s1600/Logo+cara+buat+web+gratis.jpg" width="100" height="100"/></a>
</div></div></center>

catatan :

- Ganti ULR blog dan ULR image dengan ULR milik anda.
Nah....Mudah kan...?
Silahkan anda coba dan diotak atik sendiri sesuka selera anda.
Semoga bermanfaat....
Anda juga bisa berlangganan artikel-artikel terbaru dari saya, silahkan anda masukkan email pada forum Langganan Via Email yang ada disebelah kanan halaman ini.
Jangan lupa luangkan waktu untuk beri komentar ya......terima kasih.