Minggu, 11 September 2011

Cara membuat gambar membesar jika di hover mouse

Memperbesar gambar dengan cara mengklik sudah biasa. Tapi tutorial kali ini hanya jika gambar di hover akan memperbesar sendiri sesuai skala yang di berikan pada pengeditan kode HTML. Jika penasaran dengan apa yang saya maksud silahkan arahkan mouse sobat ke Gambar di samping, maka gambarnya akan membesar dengan sendirinya. Trick ini hanya menggunakan Css dan tidak menggunakan sedikitpun JavaScript. Dan trick ini cukup berguna jika gambar yang sobat share berukuran kecil. ok berhubung saya tidak pandai bicara panjang lebar lang sung simak caranya.

Ikuti Tutor berikut dengan teliti :

  1. Sudah jelas masuk ke akun Blogger masing masing
  2. dari dashboard ke Rancangan >> Edit HTML
  3. Cari kode berikut
    ]]></b:skin>
  4. Taruh kode berikut di atas kode tadi
    .post img:hover {
    -moz-transform:scale(1.3);
    -webkit-transform:scale(1.3);
    }
  5. jika sudah Save Template

Keterangan :
  • Ganti tulisan yang berwarna biru dengan tag kode gambar post sobat masing masing (karena setiap template berbeda defaultnya sih : img:hover)
  • Ganti tulisan yang berwarna merah dengan skala yang sobat mau
  • jika ingin seperti saya, gambarnya tidak langsung gede tambahin juga kode ini
    .post img {
    -webkit-transition: all 0.6s ease-in-out;
    }
  • Jika masih belum bisa silahkan hubungi admin melalui FACEBOOK
Sekian dulu Tutor dari saya sampai jumpa lain waktu

8 komentar:

  1. thx udah posting jangan lupa kunjungan rutin blog saya ya :) :)

    http://www.bit-xp.com

    BalasHapus
  2. kalo untuk memperbesar gambar di blog saya,kayaknya kurang cocok

    BalasHapus
  3. thanks gan.

    ini caranya, boleh dipake?
    kalau boleh saya coba ;)

    BalasHapus
  4. =)) =)) =)) =)) =)) kwokwookw bikin ngakak aja nih ziyad :D :D :D :D

    BalasHapus
  5. kalo mau nambahin border ama sahadow di setiap foto di postingan gimana ya min?

    BalasHapus