Transition d'image: faire disparaitre l'image dans le cadre

[kiarie]

Bonjour,

Pour différent éléments de forum comme dans le contexte présent, sur mon PA, j'utilise un code de transition pour qu'en passant la souris sur une image, celle ci se décale sur la droite pour laisser apparaître un texte caché dessous.

Mon souci étant que cette image en ce décalant va se positionner au dessus de celle d'a coté, empêchant de passer directement la souris dessus par la suite.

J'aimerais savoir comment faire disparaître mon image dans le cadre de texte et non qu'elle aille se positionner sur l'autre.



Merci d'avance.

Code:

.textessimage {
  background-color: #333131;
  width: 50px;
  height: 80px;
  overflow: auto;
  font-family: calibri;
  font-size: 10px;
  color: #5B5B5B;
  text-align:center;
}
.imagesrtexte a {
  color: #5B5B5B;
}
.imagesrtexte img {
  margin-top: -80px;
  transition: transform 2s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
}
.imagesrtexte:hover img {
  transform: translateX(+50px);
  -moz-transform: translateX(+50px);
  -o-transform: translateX(+50px);
  -webkit-transform: translateX(+50px);
}

[MlleAlys]

bonjour,
Il ne s'agit pas que de css, mais aussi de structure html : il faut que l'image soit contenue dans un cadre avec un overflow:hidden;
https://jsfiddle.net/MlleAlys/j9r4awp2/

[kiarie]

Ah c'est bon j'ai pu corrigé en apportant cette div supplémentaire. Merci beaucoup