Effet de transition sur le logo de sa boutique

[mademoisellepolish]

Bonjour à tous,

 

Je cherche depuis quelques temps à avoir un effet de transition sur mon logo, plus précisément un zoom arrière ou une léger balancement de l'image de mon logo lorsque l'on passe le curseur de la souris dessus.

 

Je ne parviens pas à faire bouger le logo même avec le code transition, quelqu'un pourrait m'éclairer sur comment réaliser cet effet sur son logo en code css?

 

Merci d'avance pour votre aide!

 

 

 

 

 

 

[FruitySeo]

Bonjour,

 

Il faudrait surement revoir la structure et le type de l'élément contenu votre logo.

 

Pourriez vous communiquer svp l'adresse de votre site ?

 

Cdt,

[mademoisellepolish]

Bonjour,

 

Il faudrait surement revoir la structure et le type de l'élément contenu votre logo.

 

Pourriez vous communiquer svp l'adresse de votre site ?

 

Cdt,

Bonjour,

 

Merci pour votre réponse.

 

Mon site n'est pas encore en ligne. Pour ce genre de transition, il me semblait qu'il fallait simplement rajouter un code css du style:

 

transition: all 0.3s ease 0s;

-moz transition: all 0.3s ease 0s;

webkit-transition: all 0.3s ease 0s;

 

Mais malheureusement le code ne s'applique pas dans le header_logo (global.css).

 

Une idée?

[FruitySeo]

Un lien démo pour mieux voir ?

 

Merci.

[Eolia]

un petit:

.logo:hover {
  votre code css
}

devrait fonctionner

[mademoisellepolish]

Voici un exemple de ce que je recherche:

 

http://www.natacha-birds.fr/

 

On peut voir que lorsque le curseur se pose sur le logo, il zoom en arrière. Certes ce n'est pas une boutique prestashop mais cela doit être faisable, non?

 

Merci pour votre aide!

[Eolia]

Vous m'avez lu au dessus ?

[mademoisellepolish]

un petit:

.logo:hover {
  votre code css
}

devrait fonctionner

Bonjour et merci de votre retour.

 

Malheureusement, cela ne marche pas. Je ne comprends pourquoi. Je l'ai pourtant bien ajouté à l'image du header.

[FruitySeo]

La déclaration CSS est simple à la base, mais ne sachant pas si l'élément en question dépend d'autres déclaration, sinon son type d'affichage a été changé ou pas etc je ne peux vous aider sans voir le code html/css.

 

Cdt,

[Eolia]

Un clic droit sur votre logo -> inspecter l'élément et donnez-nous le contenu de votre console (capture d'écran)

[mademoisellepolish]

Un clic droit sur votre logo -> inspecter l'élément et donnez-nous le contenu de votre console (capture d'écran)

 

Voilà ce que j'ai:

 

Merci!

La déclaration CSS est simple à la base, mais ne sachant pas si l'élément en question dépend d'autres déclaration, sinon son type d'affichage a été changé ou pas etc je ne peux vous aider sans voir le code html/css.

 

Cdt,

Je me dis la même chose. Il doit y avoir quelque chose de manquant.

[FruitySeo]

Il n'y a tout simplement pas d'effet : 

 

Faites ça : 

 

1. #header_logo img:hover{
   opacity: 0.6;
   transform : scale(0.9);}
   

[mademoisellepolish]

 

Il n'y a tout simplement pas d'effet : 

 

Faites ça : 

 

1. #header_logo img:hover{
   opacity: 0.6;
   transform : scale(0.9);}
   

 

Comment dire? C'est parfait ça marche totalement!

 

Un très grand merci à vous!

[Eolia]

ou ça:

img.logo {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.logo:hover {
    -moz-transform: rotate(5deg) scale(1.10);
    -webkit-transform: rotate(5deg) scale(1.10);
    -o-transform: rotate(5deg) scale(1.10);
    -ms-transform: rotate(5deg) scale(1.10);
    transform: rotate(5deg) scale(1.10);
    opacity: 1;
}

[mademoisellepolish]

 

ou ça:

img.logo {
    -moz-transition: all 0.5s ease-in-out 0s;
    -webkit-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
    opacity: 0.7;
}
img.logo:hover {
    -moz-transform: rotate(5deg) scale(1.10);
    -webkit-transform: rotate(5deg) scale(1.10);
    -o-transform: rotate(5deg) scale(1.10);
    -ms-transform: rotate(5deg) scale(1.10);
    transform: rotate(5deg) scale(1.10);
    opacity: 1;
}

C'est parfait aussi! Merci à vous deux!

[FruitySeo]

Parfait