Memberi efek Gambar zoom ketika cursor melintas di artikel Blog

Banyak cara untuk membuat artikel menjadi menarik, baik dari segi tulisan, variasi warna, ketebalan atau jenis font. Tujuannya untuk memikat pengguna ketika berkunjung ke blog kita, namun jangan terlalu berlebihan, karena ditakutkan malah menggangu kenyamanan pembaca.
 

Salah satu hal juga untuk memikat pengunjung melalui efek pada gambar. Untuk memberi kesan variatif dan menghilangkan kesan monoton didalam artikel.
 

Efek gambar ini sering dipakai para blogger, disebut dengan nama Image Zoom Effects atau Hover Zoom Smooth Effects.
 

Efek pada gambar ketika kursor melintasi (Hover) diatas gambar, gambar akan membesar atau dizoom.
 

Cara Membuat Gambar di zoom ketika dilewati Cursor :

1. Masuk ke akun blogger
 

2. Pilih Template , kemudian pilih Edit HTML.
 

3. Cari kode ]]></b:skin> atau </style> , gunakan fungsi Find dengan menekan tombol CTRL+F pada keyboard.
 

4. Kalau sudah ketemu, letakkan kode dibawah ini tepat diatasnya,

.post img, table.tr-caption-container { border:none;
 max-width:560px;
 height:auto;
 -o-transition: all 0.5s;
 -moz-transition: all 0.5s;
 -webkit-transition: all 0.5s; }
.post img:hover { -o-transition: all 0.3s;
 -moz-transition: all 0.3s;
 -webkit-transition: all 0.3s;
 -moz-transform: scale(1.5);
 -o-transform: scale(1.5);
 -webkit-transform: scale(1.5);
 -webkit-border-radius: 0px 0px;
 -moz-border-radius: 0px / 0px;
 -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }

 

Untuk mengatur seberapa besar efek zoom pada gambar, rubah yang diblok warna hijau hingga mendekati angka 1.

5. Simpan Template