Cara Menambahkan Efek Zoom ke Gambar Blog Anda Di Mouse Hover

CSS adalah alat yang sangat kuat dan berguna saat ini, Kita dapat berbagai jenis efek pada gambar, tombol dan teks di Blog Anda. Sangat mudah dan sederhana untuk diterapkan di blog Blogger. Pada posting sebelumnya kita membahas tentang menambahkan efek rollover ke gambar Anda di blog Blogger Anda. Sekarang kita akan membahas tentang menambahkan efek zoom pada gambar Blogger.

• LIVE DEMO

Zoom melayang efek berarti, ketika Anda mengarahkan kursor mouse Anda pada gambar, ukuran gambar akan meningkat.

1. Masuk ke Blogger

2. Sekarang buka "Templat" 

3. Temukan kode selanjutnya (CTRL + F)]]> </ b: skin> dan tepat di atasnya, tambahkan kode selanjutnya:

.zoomeffect img {
-webkit-transform: scale (0.8);
-moz-transform: scale (0,8);
-o-transform: skala (0,8);
-webkit-transisi-durasi: 0,5s;
-moz-transisi-durasi: 0,5s;
-o-transisi-durasi: 0,5s;
opacity: 0,7;
margin: 0 10px 5px 0;
}

.zoomeffect img: hover {
-webkit-transform: scale (1.1);
-moz-transform: scale (1.1);
-o-transform: skala (1.1);
opacity: 1;
}

Klik pada Simpan template Cara Mengaktifkan Gambar Setiap kali Anda mengunggah gambar di editor posting Anda, cukup beralih ke mode HTML dan ubah kelas dari sebelumnya, menjadi zoomeffect .

Contoh: Kelas gambar Anda di editor pos adalah <div class = " seperator ", sekarang ubah menjadi <div class = " zoomeffect "

Jika Anda menambahkannya ke bagian lain di blog Anda, Anda dapat menggunakan kode berikut.

<a class=" zoomeffect "href=" YOUR-IMAGE-URL /" target="_blank">

<img src = "http: // YOUR-IMAGE-URL " /> </a>

Ganti Your-IMAGE-URL dengan tautan gambar yang ingin Anda terapkan efeknya.

Itu saja!