7 Aralık 2013 Cumartesi

Üzerine Gelince Büyüyen Resim Kodu

Çoğu site, kişi biliyordur ancak bu yazımı bilmeyenlere hediye edeyim : ) Cok güzel bir kod buldum sitelerde gezinirken. Üstüne geldiğinde büyüyen resim kodu.. Resim'e siyahımsı bir renk veriyor üstüne geldiğinde beyazlaşıyor ve acılıyor. Bence seveceksiniz. Ayrıntılı bir şekilde yazdım size. Eklemesi ve kullanması basit. Resim boyu felan kendisi otomatik seçip büyütüyor.. Örnekde verdim size. İnşallah işinize yarar, kullanırsınız..    

Css Tarafına Ekleyin;
<style   type="text/css">  /*Credits: Dynamic Drive CSS Library */ /*URL:   http://www.dynamicdrive.com/style/ */  .hovergallery img{   -webkit-transform:scale(0.8); /*Webkit: Scale down image to 0.8x   original size*/ -moz-transform:scale(0.8); /*Mozilla scale version*/   -o-transform:scale(0.8); /*Opera scale version*/   -webkit-transition-duration: 0.5s; /*Webkit: Animation duration*/   -moz-transition-duration: 0.5s; /*Mozilla duration version*/   -o-transition-duration: 0.5s; /*Opera duration version*/ opacity: 0.7;   /*initial opacity of images*/ margin: 0 10px 5px 0; /*margin between   images*/ }  .hovergallery img:hover{ -webkit-transform:scale(1.1);   /*Webkit: Scale up image to 1.2x original size*/   -moz-transform:scale(1.1); /*Mozilla scale version*/   -o-transform:scale(1.1); /*Opera scale version*/ box-shadow:0px 0px 30px   gray; /*CSS3 shadow: 30px blurred shadow all around image*/   -webkit-box-shadow:0px 0px 30px gray; /*Safari shadow version*/   -moz-box-shadow:0px 0px 30px gray; /*Mozilla shadow version*/ opacity:   1; }  </style> 
---
Resimleri Koyacağınız yere ekleyin:
<div   class="hovergallery"> <img src="coconut.jpg"   _fcksavedurl="coconut.jpg" /> <img src="sunbreakthrough.jpg"   _fcksavedurl="sunbreakthrough.jpg" /> <img src="desert.jpg"   _fcksavedurl="desert.jpg" /> <img src="sunflower.jpg"   _fcksavedurl="sunflower.jpg" /> <img src="forest.jpg"   _fcksavedurl="forest.jpg" /> <img src="duck.jpg"   _fcksavedurl="duck.jpg" /> </div> 

1 yorum:

  1. css kodunda webkit-transform:scale(1.1); kodunu değiştirdiğinizde açılacak resim boyununu ayarlayabilirsiniz

    YanıtlaSil

 

Subscribe to our Newsletter

Contact our Support

Email us: Support@templateism.com

Our Team Memebers