Chocomous: Cara Memperbesar Gambar Saat Kursor Diarahkan

Cara Memperbesar Gambar Saat Kursor Diarahkan

Hari ini saya mau posting tutorial memperbesar image saat kursor diarahkan ke image. How to make it? Okay, follow the steps bellow.

Cara I
  • Sign In Blogger
  • TemplateEdit HTML
  • Search this code (CTRL+F)
]]></b:skin> 
  • Kemudian Copy dan Paste kode dibawah 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: 0px 0px; -moz-border-radius: 0px / 0px; -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6); }
  • Last step, Save Template

Cara II
  • Masih di Edit HTML
  • Cari kode dibawah ini
a img 
  •  Copy dan Paste kode berikut dibawah kode a img { ... } (letakkan tepat dibawah kode yang di tebalkan } )
.post img {
-moz-opacity:0.6;
opacity:0.7;
}
.post img:hover {
-moz-opacity:.0;
opacity:1.0;
-o-transition: all 0.4s;
-moz-transition: all 0.4s;
-webkit-transition: all 0.4s;
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
-webkit-transform: scale(1.2); }
  • Save Template
Done! Let's see what you got :)

1 comment:

  1. sip lah. aku udah follow. tolong di folback ya blog aku

    http://bule-hacker.blogspot.com/

    ReplyDelete

Copyright © 2016. Designed by Ismi Islamia Fathurrahmi