IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Hover et esperluette


Sujet :

Survol d'un élément en CSS (:hover)

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut Hover et esperluette
    Bonsoir

    J'essaie de reproduire l'effet du hover comme décrit dans cette vidéo



    j ai donc reproduis le code
    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
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    <html>
    <head>
    <title></title>
    <meta charset="UTF68">
     
    <link rel="stylesheet" href="style.css">
    </head>
     
    <body>
     
    <div class="container">
     
     
    <div class="img-wrapper">
     
     
        <img src="images/burger.jpg" alt="burger">
    </div>
     
     
     
     
     
    </div>
     
     
     
     
     
     
     
     
    </body>

    le 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
    body{
       max-width: 1200px;
       margin: auto;
        background-color:royalblue;
        display: flex;
        align-items: center;
        justify-content: center;
    }
     
     
    .img-wrapper{
     
        overflow: hidden;
     
        &:hover {
            img { transform: scale(1.5); } 
     
        }  
    }
     
    img{
       transition: all 300ms linear; 
     
    }


    Le problème est que j'obtiens une erreur a-priori l esperluette pose problème

    pourrais-je avoir des explications?
    J'ai reproduit in-extenso le code de la vidéo.

  2. #2
    Expert confirmé
    Avatar de mathieu
    Profil pro
    Inscrit en
    Juin 2003
    Messages
    10 694
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juin 2003
    Messages : 10 694
    Par défaut
    ce n'est pas du css mais du code scss :
    https://sass-lang.com/documentation/...example-1-scss

  3. #3
    Membre éclairé Avatar de labarre2002
    Homme Profil pro
    Inscrit en
    Avril 2008
    Messages
    250
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Autre

    Informations professionnelles :
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Avril 2008
    Messages : 250
    Par défaut
    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [html][Css] Hover: Bug bizare
    Par méphistopheles dans le forum Mise en page CSS
    Réponses: 4
    Dernier message: 03/10/2005, 17h59
  2. Image et a:hover
    Par srvremi dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 28/08/2005, 21h46
  3. [CSS] Effet de hover qui ne fonctionne pas sous IE
    Par Ricou13 dans le forum Mise en page CSS
    Réponses: 6
    Dernier message: 14/06/2005, 09h39
  4. [CSS] balise:hover
    Par canabral dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 22/04/2005, 16h13
  5. Une technique pour :hover ?
    Par ¤dinky¤ dans le forum Mise en page CSS
    Réponses: 5
    Dernier message: 16/12/2004, 11h45

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