Résolu changer la couleur d'une image au survole

Bonjour :)

Je cherche le moyen de mettre en noir et blanc une image de mon blog, et que lorsqu'on la survole elle "reprenne" sa couleur normal. J'ai essayer avec un CSS, mais ça ne marche pas. Au lieu que la photo devienne noir et blanche, le css se marque en dessous de mon article... Est ce que vous auriez un autre css qui pourrais marcher ?

Merci d'avance !

Le css que j'ai tester :

img:hover {

filter: sepia(1);

-webkit-filter: sepia(1);

-moz-filter: sepia(1);

}

#header img:hover {

filter: sepia(1);

-webkit-filter: sepia(1);

-moz-filter: sepia(1);

}

Bonjour,

C'est normal que le code apparaisse sous ton image si tu l'inclus dans ton post de cette façon et en ce qui concerne le code lui-même ben... disons que c'est plutôt bizarre, donc rien d'étonnant que ça ne fonctionne pas. 

Pour réaliser ce que tu souhaites voici comment procéder :

Dans les lignes de codes représentant ton image comme dans l'exemple ci-dessous :

<p><a href="http://ekladata.com/yg3KYijWsMI......................jpg"><img class="couleur" src="http://ekladata.com/yg3KYijWsMI....................@500x500.jpg" alt="" /></a></p>

ajouter ce qui est en rouge pour interpréter ce que tu souhaites faire et ensuite inclure le css de cette façon :

Un grand merci pour ta réponse !! Je vais toute de suite essayer :)

Je viens d'essayer ça ne marche pas, ça fait la même choses que pour celui que j'avais déjà essayer :'(

Tu peux me mettre le lien de l'endroit où tu as mis ces codes.

Le lien, c'est à dire tout les codes sources HTML où il y a mon image ? (Je sais pas si c'est ça que tu veux)

<p style="text-align: justify;"><span class="CmCaReT" style="display: none;">�</span>&nbsp;&nbsp;</p>
<p style="text-align: justify;">&nbsp;&nbsp; <a title="Streaming" href="http://aveeva.eklablog.com/streaming-c30048880">

Le lien du post où tu as mis ces codes.

http://aveeva.eklablog.com/episodes-c30048872

Bon, je viens de récupérer tes codes :

<p style="text-align: justify;">&nbsp;&nbsp;</p>
<p style="text-align: justify;">&nbsp;&nbsp; <a title="Streaming" href="http://aveeva.eklablog.com/streaming-c30048880"><img class="couleur" alt=""/> .couleur { filter: grayscale(100%); -webkit-filter: grayscale(100%); } .couleur:hover { filter: grayscale(0%); -webkit-filter: grayscale(0%); } src="http://ekladata.com/Pfh6RiLGRoL_QHxi2VfSOfZJil4@399x300.jpg" alt="Episodes " width="399" height="300" /&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a title="R&eacute;sum&eacute;s des &eacute;pisodes" href="http://aveeva.eklablog.com/resumes-des-episodes-c24379545"><img src="http://ekladata.com/qm3bq2ZnyT6tuTbLUnztJgErelY@399x301.jpg" alt="Episodes " width="399" height="301"/></a><a href="http://ekladata.com/Pfh6RiLGRoL_QHxi2VfSOfZJil4.jpg"> </a></p>
<p>&nbsp;</p>

Comme c'est un fouillis indescriptible, le meilleur moyen de remédier à tout ça, c'est de supprimer l'intégralité.

Ensuite tu télécharges de nouveau l'image concernée puis tu passes en mode html <> et sous les codes de celle-ci tu mets le code css que je t'ai indiqué.

Ce qui devrait te donner des codes présentés de cette façon :

<p style="text-align: justify;"><a title="Streaming" href="http://aveeva.eklablog.com/streaming-c30048880"><img class="couleur" src="http://ekladata.com/Pfh6RiLGRoL_QHxi2VfSOfZJil4@399x300.jpg" alt="Episodes " width="399" height="300" /></a></p>

<style><!--
.couleur {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
.couleur:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}
--></style>

le css se mettant après le html et non au milieu.

Ca ne marche pas non plus.. Je crois que je vais abandonner

Merci beaucoup d'avoir prit le temps de me répondre

Bonsoir,

En référence à la question initiale, pour que le N&B soit au survol  il y a juste une inversion d'écriture dans le code proposé par Colette95. 

Remplacer .couleur par .couleur:hover  et inversement

Il suffit donc d'inverser .couleur et .couleur:hover 
(ou de permuter les valeurs 0% et 100%)

Dans le cas présent, ça peut aussi fonctionner sans la partie .couleur { ... } du css ; sauf si l'on voulait utiliser ultérieurement un léger effet de filtre en affichage normal (différent de 0%).

Ce CSS pourrait alors suffire pour simple effet au survol:

<style><!--
.couleur:hover {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
}
--></style>.

Bonne soirée