[Résolu] Filter grayscale avec une image qui a un lien

Bonjour à tous,

Sur mon site, j'ai mis un filtre pour avoir les images en noir et blanc sur la home, elles passent en couleur en les survolant.

Voici ma css :

.photo-nb img{
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
	-ms-filter: grayscale(1);
}
.photo-nb img:hover{
	filter: grayscale(0);
	-webkit-filter: grayscale(0);
	-moz-filter: grayscale(0);
	-o-filter: grayscale(0);
	-ms-filter: grayscale(0);
}

Cependant, en continuant mon dév, je mets des liens sur les images (je l'ai fait sur celle de Zizou), alors le hover ne donne pus de couleur et je n'arrive pas à trouver ce qu'il faut mettre ds la css pour que ça fonctionne.
Pouvez vous m'aider ? Je vous mets le nom du site dans l'image ci-jointe pour éviter que Google n'indexe ce post avec mon NDD.
Merci !! et bonne journée
Marine

Salut,

A première vue, le problème vient du fait que ton image n'est PAS dans ton lien...

OK bon point, c'est le thème qui impose ça mais je crois avoir trouvé comment faire autrement en contournant le thème.
Merci ! et bon aprèm

Aaaaaaaahhh, les thèmes WP qui font jamais ce qu'on veut
Sinon, tu n'as pas besoin de changer le balisage de ton thème, tu peux simplement jouer avec CSS. Tu ne mets plus ton :hover sur l'image mais sur le lien :

a:hover + img{
  filter: grayscale(0);
}

Petite démo rapide en ligne : http://codepen.io/korell/pen/BKVPoe?editors=1100

Ah t'es top car mon autre méthode marche pas partout... une pause s'impose grrrr.
Merci !

Parfait ça fonctionne nickel
J'abuse si je te demande s'il est possible de mettre une transition pour que le hover soit moins "violent" ? c'est transition : filter ?

C'est possible, il faut juste tester sur différent navigateurs. Il faut mettre la transition sur ton image :

img{
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
   transition: filter 0.5s;
  transition: -webkit-filter 0.5s;
}

Par contre, filter: grayscale(1); n'est pas fonctionnel sous IE. IL faut bricoler un peu ou passer par du JS. Je te laisse faire des recherches sur la manière de faire fonctionner ça partout.
Un fil sur le forum il y a quelques mois : http://forum.alsacreations.com/topic-4-75070-1-Filtergreypourie1011.html
Modifié par MatthieuR (20 Apr 2016 - 22:31)

Merci !! bonne soirée