Σήμερα θα δούμε ένα κώδικα CSS για μεγέθυνση της κάθε εικόνας ! Περάστε το ποντίκι σας πάνω από τις φωτογραφίες (αριστερά ψηλά στο blog) και θα δείτε τι εννοώ....Ο κώδικας είναι CSS, και δεν αργεί το άνοιγμα του blog σας...
Ο CSS κώδικας είναι :
.bubblewrap{
list-style-type:none;
margin:0;
padding:0;
}
.bubblewrap li{
display:inline;
width: 65px;
height:60px;
}
.bubblewrap li img{
width: 55px; /* width of each image.*/
height: 60px; /* height of each image.*/
border:0;
margin-right: 12px; /*spacing between each image*/
-webkit-transition:-webkit-transform 0.1s ease-in; /*animate transform property */
-o-transition:-o-transform 0.1s ease-in; /*animate transform property in Opera */
}
.bubblewrap li img:hover{
-moz-transform:scale(1.8); /*scale up image 1.8x*/
-webkit-transform:scale(1.8);
-o-transform:scale(1.8);
}
</style>
....και στις εικόνες σας ο HTML κώδικας:
<ul class="bubblewrap">
<li><a href="#"><img src="Η ΕΙΚΟΝΑ ΕΔΩ" title="ΓΡΑΨΤΕ ΤΙΤΛΟ" /></a></li>
<li><a href="ΤΟ ΛΙΝΚ ΕΔΩ"><img src="Η ΕΙΚΟΝΑ ΕΔΩ" title="ΓΡΑΨΤΕ ΤΙΤΛΟ" /></a></li>
<li><a href="ΤΟ ΛΙΝΚ ΕΔΩ"><img src="Η ΕΙΚΟΝΑ ΕΔΩ" title="ΓΡΑΨΤΕ ΤΙΤΛΟ" /></a></li>
</ul>
***το (1.8) είναι η μεγέθυνση...μεγαλώνει η μικραίνει (τα υπόλοιπα μεγέθη, αν δεν ξέρετε μην τα πειράξετε)
***μια πολλή καλή εφαρμογή είναι για τη μεγέθυνση των φιλικών banner...(για όσους έχουν μικρύνει τα banner φίλων στην αρχική τους σελίδα)...(μπαίνει και λινκ )
***το κόλπο βέβαια αυτό, δεν λειτουργεί σε όλους τους περιηγητές (browsers)...εδώ θα το δουν όσοι χρησιμοποιούν Chrome και Mozilla Firefox...(δεν νομίζω να σας κάνει τη χάρη ο Internet explorer...)
***μπορείτε και να ενώσετε τους 2 κώδικες, (όσοι δεν ξέρουν να βάλουν ένα κώδικα CSS μέσα στο "επεξεργασία HTML") και να φτιάξετε έναν κώδικα που θα τον βάλετε σαν gadget, σε όποιο σημείο της σελίδας σας θέλετε
***DEMO θα βρείτε σίγουρα σε κάποιο blog μου, (πχ dr-blogger)
ΚΑΛΗ ΕΠΙΤΥΧΙΑ !!!
ΠΗΓΗ : dynamicdrive.com/
{Αν σας άρεσε αυτή η ανάρτηση, ξοδέψτε 5'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}