Cara Membuat Gambar Dengan Efek Auto Zoom

Cara Membuat Auto Zoom pada gambar di blog, caranya ga ribet nie, ini caranya ringan dan praktis, singkatnya, Auto Zoom ini bekerja saat Mouse kita arahkan kegambar tesebut, maka secara otomatis gambar akan men Zoom. Ya udach, kita langsung ke caranya aja yu.

1.    Masuk ke  Blogger >> Pada Dasbor >> Pilih Template >> Edit HTML >> Expand widget templates

2.  Sekarang cari kode ]]></b:skin>, dan  Copas kode CSS di bawah ini tepat diatas kode ]]></b:skin>.

 .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: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);
}

Note : Kode yang berwarna Merah, adalah ukuran Zoom, yang akan ditampilkan, sobat bisa merubahnya dengan kehendak sendiri.

3.      Terakhir, Simpan Template

• Tweet
• Share
• Share
• Share
• Share

Sign up here with your email