Γίνετε μέλος του Dr-blogger στο fb.Απλά πατήστε like από κάτω

photto




4 Κώδικας CSS για μεγέθυνση εικόνων


Νέοι bloggers γεια σας...
Σήμερα θα δούμε ένα κώδικα CSS για μεγέθυνση της κάθε εικόνας ! Περάστε το ποντίκι σας πάνω από τις φωτογραφίες (αριστερά ψηλά στο blog) και θα δείτε τι εννοώ....Ο κώδικας είναι CSS, και δεν αργεί το άνοιγμα του blog σας...



    Ο CSS κώδικας είναι :
    <style type="text/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'' από το χρόνο σας να τη μοιράσετε με τα πλήκτρα από κάτω}
    Related Posts Plugin for WordPress, Blogger...
    Print Friendly and PDF

    4 σχόλια:

    Γιάννης είπε...

    Μπράβο κάλλη δουλειά συγχαρητήρια.

    Αρης είπε...

    δεν γινεται!

    beautymark.gr είπε...

    Αυτό Δουλεύει και μάλιστα νομίζω δουλεύει πολύ καλά.Πολύ καλή μεγέθυνση.http://www.4beautymark.com/2012/09/choppy.html

    Ράδιο Έγριπο είπε...
    Αυτό το σχόλιο αφαιρέθηκε από τον συντάκτη.