Image en dessous d'une image coulissante

[Shiyami]

Bonjour à vous ! 
J'ai déjà le code me permettant de mettre un texte sous une image coulissante que voici :

Code:

.bloc-contenant {
    width:400px;  /*largeur du bloc*/
    position: relative;  /*pour pouvoir positionner l image plus bas en absolu*/
    overflow: hidden;  /*pour ne pas voir l image quand elle sort*/
}
.texte-dessous {
    padding: 5px; /*marge intérieur du bloc*/
    height: 400px; /*hauteur du bloc*/
    overflow: auto;  /*pour la barre de défilement si plus long*/
}
.img-glisse {
    width:100%;  /*largeur de l image s'adapte au bloc*/
    height:100%;  /*hauteur de l image s'adapte au bloc*/
    position: absolute;  /*positionnement par rapport au boc*/
    top:0;  /*positionnement vertical*/
    left:0;  /*positionnement horizontal*/
    transition: left 1s ease;  /*pour l effet de transition*/
}
 
.bloc-contenant:hover .img-glisse {
    left:-100%;  /*au survol de bloc-contenant, l image est au dessus du bloc*/
}

J'aimerai que l'image coulisse toujours vers la gauche, et qu'elle fasse apparaître une autre image (de même taille).
J'ai essayé de bidouiller le code, seulement rien à faire, ça ne veut pas. Soit l'image coulissante est au dessus de l'autre image, soit l'autre image est trop grande donc le overflow se déclenche (normal, il est en auto). 
Bref, si quelqu'un pouvait m'aider, ce serait super !
Je remercie d'avance la bonne âme qui me viendra en aide !

EDIT : Les images font du 700x642 px et le "code" que j'ai utilisé :

Code:

[center]<div class="bloc-contenant">
    <img class="texte-dessous" src="http://zupimages.net/up/17/16/w0pd.jpg"/>
</div></div>
    <img class="img-glisse" src="http://zupimages.net/up/17/16/ehj2.jpg"/>
</div>[/center]

J'ai bidouillé un peu ce code-ci pour l'image mais franchement, rien à faire. L'image qui est sensée coulisser est tout en haut de mon forum, elle est devant l'image du forum.

[Shiyami]

Up

[tupac]

Bonjour Shiyami,

Essayer avec celui-la.

Code html.

Code:

<div class="view view-fifth">
<!--  image du dessus  -->
<img src=" votre image ici " alt="" style="width: 300px; height: 200px;" />
</div>

Code css.

Code:

.view {
    background: url( votre image ici ) no-repeat center center;  /* image du dessous */
    width: 300px;
    height: 200px;
    border: 5px solid #fff;
    overflow: hidden;
    position: relative;
}

.view-fifth img {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.view-fifth:hover img {
  -webkit-transform: translateX(-300px);
  -moz-transform: translateX(-300px);
  -o-transform: translateX(-300px);
  -ms-transform: translateX(-300px);
  transform: translateX(-300px);
}

.view img { display: block; position: relative; }

[Shiyami]

Merci pour ta réponse !
Alors, l'image du dessus s'affiche mais celle du dessous ne s'affiche pas

[lmc38510]

Bonjour "Shiyami"

Concernant ton code Html :

Code:

[center]<div class="bloc-contenant">
    <img class="texte-dessous" src="http://zupimages.net/up/17/16/w0pd.jpg"/>
</div></div>
    <img class="img-glisse" src="http://zupimages.net/up/17/16/ehj2.jpg"/>
</div>[/center]

il faut le modifier comme suis:

Code:

<center>
  <div class="bloc-contenant">
    <img class="texte-dessous" src="http://www.zupimages.net/up/17/16/w0pd.jpg"/>
    <img class="img-glisse" src="http://zupimages.net/up/17/16/ehj2.jpg"/>
  </div>
<center>

Le CSS correspondant:

Code:

    .bloc-contenant {
        width:435px;  /*400 modifier à 435 pour voir tout le texte*/
        position: relative;
        overflow: hidden;
    }
    .texte-dessous {
      /*padding: 5px; /*Supprimé*/
        height: 400px;
  /* overflow: auto;  /*Supprimé*/
    }
    .img-glisse {
        width:100%;
        height:100%; 
        position: absolute; 
        top:0;
        left:0;
        -moz-transition: all 1s ease-out;  /* Ajout  ... top devient all*/
        -o-transition: all 1s ease-out;    /* Ajout  ... top devient all*/
        -htm-transition: all 1s ease-out;  /* Ajout  ... top devient all*/
        -webkit-transition: all 1s ease-out;  /* Ajout  ... top devient all*/
        transition: all 1s ease;  /* top devient all*/
    .bloc-contenant:hover .img-glisse {
        left:-100%;
    } 
    }

Testé et Fonctionne

[Shiyami]

Euh, de mon côté ça ne fonctionne pas, je vais voir ce qui cloche...
Voici ce que ça donne : 


J'ai essayé de changer les noms, au cas où il y aurait des répétitions dans ma fiche CSS, mais rien à faire, ça reste comme ça :/
(Pourtant, c'est vrai que ça fonctionne de votre côté !)

[lmc38510]

Ton code html et css sont-ils dans une page html ...?

As tu un lien pour visionner

[Shiyami]

Hmmm... Dans une page html ? Comment faire ?

[lmc38510]

En passant par insertion "iframe":

Code:

    <center>
    <iframe src="/xxxxxxxxxxxx" width="yyypx" height="zzzpx" frameborder="0" scrolling="no" allowtransparency="true">
    </iframe>
    </center>

Avec xxxxxx le lien de ta page HTML
yyy la largeur
zzz la hauteur

[Shiyami]

Merci beaucoup ! Ca marche