Css

Résolu
jordxn -  
 Utilisateur anonyme -
Bonjour,

J'aimerais appliqué un style a une seule image de mon site mais j'y arrive pas :

<img class="img-responsive img-circle img-left" src="img/intro-pic.jpg">

img {
-moz-transition-duration:2s;
-moz-transition-timing-function:linear;
-webkit-transition-duration:2s;
-webkit-transition-timing-function:linear;
transition-duration:2s;
transition-timing-function:linear;
}

img:hover {
-moz-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}

j'ai essayé avec un id mais je n'y parvient pas...

merci

4 réponses

  1. Utilisateur anonyme
     
    salut, dans ta CSS tu met img donc tu appelle toutes tes images

    il faut que tu utilise une de tes class

    ׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
    0
  2. jordxn Messages postés 375 Statut Membre 1
     
    Oui mais comment car j'ai essayé de faire :
    <img class="img-responsive img-circle img-left rot" src="img/intro-pic.jpg">

    .rot {
    -moz-transition-duration:2s;
    -moz-transition-timing-function:linear;
    -webkit-transition-duration:2s;
    -webkit-transition-timing-function:linear;
    transition-duration:2s;
    transition-timing-function:linear;
    }

    .rot:hover {
    -moz-transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    transform:rotate(360deg);
    }

    mais rien y fais...
    0
  3. Utilisateur anonyme
     
    j'ai répondu a quelqu'un sur un sujet semblable

    https://forums.commentcamarche.net/forum/affich-29334144-image-rotative-via-bouton-html-css-java#p29340519

    http://pour-ccm.zz.mu/ccm.html

    ׺°"~'"°º×]|I{*------» m3745p10!7 «------*}I|[׺°"~'"°º×
    0
    1. Utilisateur anonyme
       
      il y a juste à adapter
      0
    2. jordxn Messages postés 375 Statut Membre 1
       
      Oui mais je vais perdre le css de "img-responsive img-circle img-left" non ?
      0
    3. Utilisateur anonyme
       
      donne voir la css de tes trois class
      0
    4. jordxn Messages postés 375 Statut Membre 1
       
      .img-circle {
      border-radius: 50%;
      }

      .img-responsive {
      display: block;
      height: auto;
      max-width: 100%;
      }

      .img-left {
      float: none;
      margin: 0 auto 0;
      }

      C'est du boostrap casual
      0
    5. Utilisateur anonyme
       
      animostab ta donné le bon code et je pense pas que tu perde ta css
      0
  4. animostab Messages postés 3003 Date d'inscription   Statut Membre Dernière intervention   738
     
    Bonjour

    Voici le code correct

    css

    .rotate img {
    -moz-transition: all 2s linear;
    -webkit-transition: all 2s linear;
    -o-transition: all 2s linear;
    -ms-transition: all 2s linear;
    transition: all 2s linear;
    -moz-transition-duration:2s;
    }
    .rotate img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }

    html

    <div class="rotate">
    <img src="img/intro-pic.jpg">
    </div>

    Ou

    <a class="rotate">
    <img src="img/intro-pic.jpg">
    </a>

    Un petit merci vaut mieux qu'une grande ignorance
    0
    1. jordxn Messages postés 375 Statut Membre 1
       
      Merci j'ai pu rajouter mes class :
      <div class="rotate">
      <img class="img-responsive img-circle img-left" src="img/intro-pic.jpg">
      </div>

      Merci
      Resolu
      0