28172 sujets

CSS et mise en forme, CSS3

Problème d'effet en CSS qui s'applique sur toutes les images

Bonjour,
J'ai un souci avec un petit script qui me permet de faire tourner le logo PNG quand on passe la souris dessus (et quand on clique dessus). Le souci, c'est qu'il perturbe toutes les images de la page quand on passe la souris dessus. Alors que je voudrais que cela n'agisse que sur le logo.
J'ai bien compris que cela venait de IMG, mais je ne sais pas comment isoler le logo et mes connaissances en code sont limitées (mes recherches n'ont rien donné). 2ème problème : le logo ne se centre pas sur la page.
Voici le code :
<!--Logo over slideshow-->
<style  type="text/css">
#overlogo
img{
  position:absolute;
  top:60px;
  text-align:center;
  z-index:999;
  -webkit-transition:-webkit-transform .9s; 
  -moz-transition:-moz-transform .9s;       
  -o-transition:-o-transform .9s;           
  -ms-transition:-ms-transform .9s;        
  transition:transform .9s;
}
 img:hover{
  position:absolute;
  top:60px;
  text-align:center;
  z-index:999;
  -webkit-transform:rotate(720deg); 
  -moz-transform:rotate(720deg);
  -o-transform:rotate(720deg); 
  -ms-transform:rotate(720deg); 
  transform:rotate(720deg);
}
</style>
<div id="overlogo"><a href="/" style="text-align:center"><img src="/wp-content/uploads/2020/03/logo-site-e1585087751426.png" /></a></div>
<!--/Logo over slideshow-->

Merci par avance de votre lumière Smiley smile
Modifié par husky (30 Mar 2020 - 23:48)
Modérateur
Bonjour et bienvenue,

Pas évident de voir ton souci. As tu une capture ou des captures écran de ta page ou un code source plus explicite ?
Bonjour,

Dans ton cas le problème vient de ton sélecteur CSS.
Tu utilises "IMG" du coup du demande à CSS d'appliquer à TOUTES les balises IMG ton CSS
img{


Et bien sûr ce n'est pas ta demande.

2 solutions:
- Soit tu joues sur l'ID de ta balise <img>
- Soit tu ajoutes un attribut "DATA-"

c'est quoi "data attribut" ???



Tu pourras ainsi appliquer ton effet uniquement à ton logo.


<!--Logo over slideshow-->
<style  type="text/css">
#overlogo
img[data-rotate]{
  position:absolute;
  top:60px;
  text-align:center;
  z-index:999;
  -webkit-transition:-webkit-transform .9s; 
  -moz-transition:-moz-transform .9s;       
  -o-transition:-o-transform .9s;           
  -ms-transition:-ms-transform .9s;        
  transition:transform .9s;
}
img[data-rotate]:hover{
  position:absolute;
  top:60px;
  text-align:center;
  z-index:999;
  -webkit-transform:rotate(720deg); 
  -moz-transform:rotate(720deg);
  -o-transform:rotate(720deg); 
  -ms-transform:rotate(720deg); 
  transform:rotate(720deg);
}
</style>
<div id="overlogo"
    <a href="/" style="text-align:center"
        <img data-rotate src="/wp-content/uploads/2020/03/logo-site-e1585087751426.png" />
    </a>
</div>
<!--/Logo over slideshow-->
Bonjour husky,
Ton premier selecteur cible l'image dans le div "overlogo".
Il faut faire la même chose avec le :hover 
#overlogo img:hover{....}
Meilleure solution
Bonjour et un très grand merci à tous d'avoir le temps de me répondre et d'étudier le sujet ! Effectivement aliasdmc, le problème venait de là, le problème de rotation de toutes les images est résolu ! Biduletruck, j'ai essayé le code que tu m'as fourni, mais le logo n'apparaissait plus. Du coup j'ai rajouté le #overlogo et l'effet de rotation ne s'applique qu'à cette image.
Il me reste le petit problème de centrage de l'image (le logo) sur ma têtière (qui se fait très bien si je ne mets pas le code de rotation). Et curieusement, sur mobile, le logo est bien centré !
Merci d'avance pour votre lumière Smiley smile et très belle journée à vous !
(Si vous voulez voir le site en question, je vous envoie le lien en PV)
Bonjour husky
Si c'est un centrage horizontal que tu veux , essayes : 
#overlogo{text-align:center;}
Merci beaucoup aliasdmc !
J'ai du mettre un margin-right:350px car je ne sais pas pourquoi, le logo se centre sur la droite.
Dernière question : sans faire une feuille de style complète spéciale pour mobiles, puis-je définir un "top" différent pour ceux-ci ?
Je t'envoie le lien du site en privé, tu comprendras la différence.
Encore merci
Sujet clos
Aller à