Cara membuat gambar membesar ketika di kursor

Cara membuat gambar membesar ketika di kursor

Sobat Histutor yang berbahagia, mungkin diantara kita ada yang menemukan atau mengunjungi sebuah blog/ situs website yang ketika kita menyorot atau menyentuh gambarnya dengan kursor maka gambar tersebut akan membesar secara otomatis, itu semua terjadi karena ada kode css yang dipasang di di blog tersebut.
Pada postingan saya sebelumnya pernah membahas tentang cara membuat icon admin pada kolom kementar, dan kali ini saya akan berbagi sedikit tutorial mengenai membuat gambar membesar ketika disentuh kursor.
Untukmembuat gambar membesar ketika disentuh kursor tidaklah sulit, jika sobat berminat membuat diblog sobat sendiri, cukup ikuti langkah-langkahnya yang saya buat di bawah berikut contoh untuk demonya lengkap dengan screenshot yang terbaik saya persembahkan buat sobat semua :D .

Cara membuat gambar membesar ketika disentuh kursor

1. Login ke akun blogger anda
2. Click On Template » Edit HTML
3. Gunakan Ctrl+F  untuk menemukan kode ]]></b:skin> atau </style>
4. Setelah ketemu letakan kode CSS script diatas kode ]]></b:skin> atau </style>
 
.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); }

5. Simpan dan lihat hasilnya dengan cara menyetuh gambar diblog sobat dengan kursor.

DEMO SOROT GAMBAR DIBAWAH


Subculture Fix Responsive Blogger Template
Screenshot Untuk Demo


Silahkan tinggalkan komentar jika anda menemui kendala dalam penerapan  postingan ini, mari kita bahas bersama! 
Demikian sedikit penjelasan tentang Cara membuat gambar membesar ketika di kursor, jika ada kesalahan dalam penulisan saya mohon maaf dan semoga bermanfaat. Saya akan sangat senang dan berterimakasih jika sobat berkenan untuk berkomentar di blog ini.
Previous Post
Next Post

post written by:

1 comment:

  1. makasih gan work.
    dapatkan juga artikel yang sangat menarik dari komchar.blogspot.com

    ReplyDelete