+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    juin 2008
    Messages
    23 648
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 47
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : juin 2008
    Messages : 23 648
    Points : 91 400
    Points
    91 400
    Billets dans le blog
    20

    Par défaut Zoomer une image façon thumbnail en CSS



    Pascale Lambert vous propose un nouveau tutoriel sur le zoom d'une image à la façon "thumbnail" en CSS. Elle nous y explique comment créer une série de vignettes zoomables à la sauce 100% CSS.

    N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

    Voir aussi les cours et tutoriels pour apprendre CSS.

    Merci à elle
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  2. #2
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations forums :
    Inscription : octobre 2011
    Messages : 9
    Points : 11
    Points
    11

    Par défaut Amélioration de la 2e technique

    Bonjour,

    D'abord merci pour le tuto.

    Je viens à peine de tester la 2e technique et vu que vous aviez dit ne pas comprendre vous-même l'astuce et bien j'ai l'explication : La magie est de faire disparaître la grande image puis de la faire réapparaître via le pseudo-élément :hover.

    Pour cela, on insère l'image dans un bloc grâce à display:bloc. Pour vous convaincre que l'image n'est pas un bloc mais s'insère plutôt dans un bloc, il faut appliquer border-radius et vous verrez que l'image se ''conforme'' aux dimensions du bloc : C'est l’héritage mis en exergue !

    Et c'est là, le génie de celui-qui a créer la technique...car pour faire disparaître l'image, il va faire disparaître le bloc qui contient l'image...et pour y arriver, il donne une valeur nulle à la largeur du bloc en question.

    To be continued...

  3. #3
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations forums :
    Inscription : octobre 2011
    Messages : 9
    Points : 11
    Points
    11

    Par défaut Amélioration de la 2e technique (suite)

    traduction CSS : width:0;

    Ensuite, on utilise a:hover .grand et NON a .grand:hoover...Parce qu'en faisant disparaître notre bloc, aucun pixel à l’écran n'est mobilisé pour afficher le bloc disparu...c'est le vide créé et donc :hoover ne marche pas...c'est logique.

    Comme cela, on dit à l'ordi que si tu passe sur un lien alors donne tels propriétés à la classe grand.

    Et ces propriétés sont : nouvelles dimensions, nouvelle position + autres propriétés CSS...bah selon vos goûts quoi.

    Après (encore ?!?)....on sourit....xa marche !!!

  4. #4
    Membre à l'essai
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    9
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations forums :
    Inscription : octobre 2011
    Messages : 9
    Points : 11
    Points
    11

    Par défaut Amélioration de la 2e technique (dernière partie)

    Apres l'explication, voici l'amelioration :

    On est pas obligé d'afficher l'image horizontalement car la verticale est aussi possible....on remplace juste la balise <a> par la balise <p>.

    De plus, on peut jumeler la technique 1 à mon amelioration et cela donne >>>

    Code XHTML :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <div>
           <p href="#">
             <img src="votreimage.jpg" alt="xixi" />
             <img src="votreimage.jpg" alt="lili" class="grandos" />
           </p>
     
           <p href="#">
             <img src="votreimage.jpg" alt=''xuxu" />
             <span class="grando">Merci pour le tuto</span>
           </p>
     
           <p href="#">
             <img src="votreimage.jpg" alt="xoxo" />
             <img src="votreimage.jpg" alt="lolo" class="grand"  />
           </p>
         </div>


    Code CSS :

    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    body
     {	
     height:500px; 
    }
     
    img 
    {
     border:none;
    }	
    div
    {
     position:absolute; 
     top:10px;
     left:10px; 
    }
    p
     {
     margin:0px;
     text-decoration:none;
    }
    .grandos 
    {
     display:block;
     position:absolute; 
     width:0; 
    }	  
     
    p:hover .grandos
    { 
     position:absolute; 
     top:20px;
     left:125px;
     width:225px; 
     height:50px; 
     border-radius:20px;
     border:2px solid black;
     
    }
    .grando 
    {
     display:block;
     position:absolute;
     right:400px;
     top:200px;
     color:white;
    }	  
     
    p:hover .grando
    { 
     position:absolute; 
     top:130px;
     left:125px;
     width:225px; 
     height:50px; 
     border-radius:20px;
     border:2px solid black;
     color:black;
     text-align:center;
    }
    .grand 
    {
     display:block;
     position:absolute; 
     width:0; 
    }	  
    p:hover .grand
    { 
     position:absolute; 
     top:220px;
     left:125px;
     width:225px; 
     height:50px; 
     border-radius:20px;
     border:2px solid black;
    }

    Merci.

Discussions similaires

  1. Zoomer une image avec les CSS
    Par scoubi77 dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 25/12/2011, 23h22
  2. Zoomer une image façon thumbnail en CSS
    Par Kerod dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 13/10/2011, 01h25
  3. zoomer une image
    Par benoit70 dans le forum MFC
    Réponses: 1
    Dernier message: 06/05/2008, 14h22
  4. Afficher une image en background avec CSS
    Par plante20100 dans le forum Mise en page CSS
    Réponses: 2
    Dernier message: 29/10/2007, 17h16

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo