Monday, March 9, 2015

Tutorial:Cara Memperbesar Gambar Saat Kursor Diarahkan

 
Hii everyone!!
Today, I would like to posting tutorial tentang cara memperbesar image saat kursor diarahkan ke image. Wanna know?? Okay, follow the steps~!!
READ MORE


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
You're Done!! 
Let's see what you got :)

No comments:

Post a Comment

Moshi - Moshi

Leave comment here
Request ? tell in cbox
Dont bad words

Obey the rules ? Free comment :)

 
Related Posts Plugin for WordPress, Blogger...