2014. december 28., vasárnap

Képfelnagyító script #1

Sziasztok!
Igen,már mostanában én is elég inaktív vagyok.De ezért bocsánatot szereték kérni,de mostmár év vége,és több,meg több ünnep van.Mivel,nagyon régen volt kódos bejegyzés,ezért gondoltam most megleplek titeket egy kóddal.Ez nem egy közönséges kód.Manapság minden portálon,blogon található....a képfelnagyító srcipt!Ezt is,mint minden kódot,a HTML/Java Script modullba kell beilleszteni.Innentől kezdve,ha ráviszed a blogodon/portálodon a képre a kurzort,akkor láthatod,hogy különböző módon,úgymond "növekszik" a kép.Ha ezzel kapcsolatban,valami nem világos,akkor az bátran írjon! c:


                                                                          Demó 

                    (szokásos demót lehetetlen volt hozni,ezért készítettem nektek róla egy képet)

 
A képen tökéletesen látszik,hogy,amikor rávisszük a kurzort,nagyobb lesz
és kap egy csipetnyi árnyékot.



A KÓD:
HTML kód
                           <div class="hovergallery">
                      <img src="KÉPED URL CÍME" />
                                         </div>


                                     CCS kód
 <style type="text/css">
 
.hovergallery img{
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8); 
-o-transform:scale(0.8); 
-moz-transition-duration: 0.5s; 
-o-transition-duration: 0.5s; 
opacity: 0.7;
margin: 0 10px 5px 0; 
}
 
.hovergallery img:hover{
-webkit-transform:scale(1.1);
-moz-transform:scale(1.1); 
-o-transform:scale(1.1);
box-shadow:0px 0px 30px gray;
-webkit-box-shadow:0px 0px 30px gray; 
-moz-box-shadow:0px 0px 30px gray; 
opacity: 1;
}
 
</style>
 
      Ha pedig a képek számát szeretnéd növelni,akkor 
              mindíg ezt illeszd be a kód alá:
                 <img src="KÉPED URL CÍMR" />







Nincsenek megjegyzések:

Megjegyzés küldése