Pour réaliser cet effet de saturation sur une image, tu ne pourras pas utiliser hsl. En effet hsl est juste pour une couleur, pas pour une image.

Pour mettre en noir et blanc en CSS tu peux utiliser les filtres CSS. Mais attention, cela ne marche qu'avec le préfixe "-webkit-" (par exemple sur Chrome, ou Safari). Pas sur Internet Explorer ou Firefox.

Code:

   -webkit-filter: grayscale(100%);

Sinon, tu peux chercher sur internet un plugin (cherche par exemple "jquery black and white" sur Google, il y a pleins d'exemples), mais cela ralentira (plus ou moins) la vitesse de chargement de ton forum.

Oh :s , ça marche uniquement pour Firefoz et Chrome :s Oh lala ...
Sinon n'y a-til pas une facon de faire deux images , une normale et une sous hover et faire une transition de hover entre ces deux images ?

Oui, ça sera juste un peu plus long à faire.
Le principe est le même que ce tutoriel.

Pour chaque image ça va respecter cette structure là :

Code:

<a href="lien" title="Nom du partenaire">
 <img src="lien_image" alt="Nom du partenaire"/>
 <img src="lien_image" alt="Nom du partenaire" class="couleur"/>
</a>

Ensuite dans le css, tu dois faire en sorte que l'image avec la class "couleur" sois positionnée au dessus de l'image en noir et blanc, mais avec une opacité de 0.

Le code CSS fourni vient en complément du code css sur le tuto du tableau de partenaire.

Il faut juste enlever cette partie là :

Code:

div.cssactif_tableaupartenaire a:hover img {
  height: 31px; /* Hauteur finale */
  width: 88px; /* Largeur finale */
  z-index: 99; /* Place l'image au-dessus des autres */
  
  /* Positionne le logo de pleine taille au centre - À adapter */
  left: -50%;
  top: -50%;
}

Pour mettre :

Code:

div.cssactif_tableaupartenaire a:hover img.couleur {
  opacity: 1; /* au survol, on voit */
}

Et rajouter :

Code:

div.cssactif_tableaupartenaire a img.couleur {
  opacity: 0; /* par défaut transparent, on ne voit pas l'image en couleur */
}

Je pense que ça devrait fonctionner ^^

Et la transition marchera aussi ?

Oui elle est dans le CSS du tutoriel "Tableau de partenaires avec effet Zoom" ^^

Mais je ne sais pas comment placer mon image au dessus :s

Si tu vois ici : http://infernum-renatus.superforum.fr ( dans mon slider sur la PA dans l'onglet Les Contacts ) ... je ne sais pas si c'est le bon rendu car même le truc d'opacité ne semble pas marcher tres bien. Et je me souvient quand j'ai essayer avec le code CSS venant du tutoriel pour le tableau effet zoom , je n'étais pas capable de l'intégrer dans mon slider, le code ne marchais pas :s

Il faut reprendre la structure du tutoriel (mettre les différents liens dans la même div avec la même class que dans le tuto), et copier le code css du tuto (sauf la partie dont j'ai parlé dans mon truc d'avant).

J'ai faite la partie CSS requise ,
C'est le html qui pose probleme , si je prend celui du tuto ... je ne sais pas où mettre ma deuxieme image. Pour le html du tuto tu ne met le lien que d'une image et cest le css qui le change , mais là , jdoit mettre les deux images. Bref je suis complètement mélangée

T'inquiète pas, j'ai été un peu vite dans mes explications en effet.

Je suppose que pour le HTML tu as mis ceci (juste la partie que j'avais donnée):

Code:

<a href="lien" title="Nom du partenaire">
 <img src="lien_image" alt="Nom du partenaire"/>
 <img src="lien_image" alt="Nom du partenaire" class="couleur"/>
</a>

En fait il faudrait faire comme ça :

Code:

<div class="cssactif_tableaupartenaire">
      <a href="lien" title="Nom du partenaire">
            <img src="lien_image" alt="Nom du partenaire"/>
            <img src="lien_image" alt="Nom du partenaire" class="couleur"/>
      </a><!--
      --> <!-- ICI TU METS LES AUTRES-->
</div>

Je t'adore Tu es ma meilleure amie du forum lol :3
Merci encore beaucoup tu me sauve !