Cara Membuat effect Gambar membesar saat disentuh Mouse

Selamat malam para blogger, salam erat para anak bangsa. ijinkan saya posting tutorial Cara Membuat effect Gambar membesar saat disentuh Mouse. Banyak kan sekarang blogger yang blognya saat gambar kena gerakan pointer mouse bisa membesar, bahkan ada yang memutar. Kali ini saya akan membahas yang membesar. Caranya:

1. Login ke blogger>template>edit html
2. Kemudian cari kode ]]></b:skin>
3. Copykan scriptdibawah ini diatas kode ]]></b:skin> :

.post img:hover {
-o-transition: all 0.3s;
-moz-transition: all 0.3s;
-webkit-transition: all 0.3s;
-moz-transform: scale(1.3);
-o-transform: scale(1.3);
-webkit-transform: scale(1.3); } 

4. Simpan templatenya. dan hasilnya akan seperti ini

Coba yang ini, membuat gambar berputar 

 
.post img{-o-transition: all 1s ease;-moz-transition: all 1s ease;-webkit-transition: all 1s ease;}
.post img:hover{-o-transform: scale(1.2) rotate(360deg) translate(0px);-moz-transform: scale(1.2) rotate(360deg) translate(0px);-webkit-transform: scale(1.2) rotate(360deg) translate(0px);-o-transition: all 1.5s ease;-moz-transition: all 1.5s ease;-webkit-transition: all 1.5s ease;}



Caranya seperti yang diatas. Sekian posting saya
[ gambar membesar ]
[ gambar berputar ] 

Share :

Tweet

More

Related Post