AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


    Agrandissement d'image au survol

    Partagez
    Lucky Numb£r
    MasculinAge : 23Messages : 1971

    le Mer 21 Avr 2010 - 0:46

    Rappel du premier message :

    Bonsoir, en cette belle soirée de vacances je vais vous poster quelques astuces à la demande de Sparrow. La première consiste à appliquer une sorte de zoom à une image. Pour ceci il faudra combiner un peu de code Html et CSS. Tout d'abord prenez l'image et appliquez lui une class, dans notre cas ce sera la class "zoom".
    Code:
    <div class="zoom">
        <p>
            <img src="URL DE L'IMAGE"
            alt="NOM DE L'IMAGE" />
        </p>
    </div>
    Il suffit ensuite de rajouter dans votre CSS ce petit qui bien évidemment est personnalisable selon les besoins.
    Code:
    .zoom {
    height:XXXpx;
    margin:auto;
    }
    .zoom p {
    text-align:center;
    }
    .zoom img {
    width:XXXpx;
    height:XXXpx;
    }
    .zoom img:hover {
    width:XXXpx;
    height:XXXpx;
    }
    Voilà c'est tout pour cette première astuce, enjoy Wink !
    P.S ~ Cette astuce a été partagée par Sparrow lui même, mais je ne sais plus à quel moment.
    P.S² ~ Remarquez que c'est aussi sur ce principe que sont fondées les infobulles...


    Dernière édition par Lucky Numb£r le Lun 10 Mai 2010 - 20:08, édité 1 fois



    Tina
    FémininAge : 32Messages : 58

    le Mar 3 Aoû 2010 - 15:45

    Hum, ça j'ai bien compris mais ce n'est pas exactement ce que je cherche à faire mais merci quand même ^^




      Soi Fong & Aizen Sosuke fan :3
    Daft Kakashi
    MasculinAge : 23Messages : 1628

    le Ven 12 Nov 2010 - 16:08

    Bonjour, est-il possible d'appliquer ce code sur une seule image?




    Slem
    FémininAge : 19Messages : 541

    le Dim 24 Avr 2011 - 0:43

    Merci =)



    Sign & Ava by me, don't touch please. (je signe également Yoshi)
    titou9322
    MasculinAge : 20Messages : 158

    le Sam 4 Fév 2012 - 13:41

    moi sa ne marche pas
    Irissia87
    FémininAge : 29Messages : 124

    le Sam 11 Fév 2012 - 16:13

    Merci pour cette astuce!!
    Aeden
    FémininAge : 27Messages : 59

    le Mer 13 Mar 2013 - 8:14

    merci =)



    Aeden
    FémininAge : 27Messages : 59

    le Mer 13 Mar 2013 - 8:16

    merci =)



    Contenu sponsorisé

    Aujourd'hui à 21:20


      La date/heure actuelle est Sam 10 Déc 2016 - 21:20