Problème avec une transition

[Shiyami]

Bonjour/Bonsoir à tous !
J'ai découvert les transitions il y a peu de temps (et ce sont des petites merveilles !) et j'aimerais faire ceci sur ma page d'accueil (pour les images du staff.)

Maquette de ma PA:

Et voici ce que ça donne pour l'instant : ici.

Voici également mon code (sous hide):


L'effet sur les images est : noir et blanc + apparition d'un "bloc" blanc depuis la gauche où il est écrit : PSEUDO MP - PROFIL.

Merci d'avance à bonnes âmes qui voudront bien m'aider ^-^

[MlleAlys]

Bonjour,
Dans la démarche, d'abord appliquer à chaque élément sa mise en forme, avant de s'occuper uniquement de ce qui change au survol.
Code css :

Code:

.PA_STAFF-cadre {
  display: inline-block;
  vertical-align: top;
  box-sizing: border-box;
  height: 55px;
  width: 216px;
  overflow: hidden;
  position: relative;
  filter: grayscale(0%);
  transition: filter 0.5s ease-out;
}
.PA_STAFF {
  background: white;
  padding: 10px;
  box-sizing: border-box;
  width: 75%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -100%;
  transition: left 0.5s ease-out;
}

.PA_STAFF-cadre:hover {
  filter: grayscale(100%);
}
.PA_STAFF-cadre:hover .PA_STAFF {
  left: 0;
}

[Shiyami]

Whoa...
Merci beaucoup, ça marche nickel !!!