Image coulissante

[Cramby']

Bonjour tout le monde !
Je reviens de nouveau vers vous pour un petit problème d'image coulissante laissant apparaitre un texte. Le problème est que le texte est bien présent, mais l'image n'apparait pas, on voit donc juste le texte qui est censé être sous l'image...
Voila le html :

Code:


<table><tr><td><div class="contenant"><div class="contenu">TEXTE DERRIERE L'IMAGE</div><img src="http://img105.imageshack.us/img105/4691/lunaqk2.png"/>
</div></td><td colspan=2><div class="contenant"><div class="contenu">TEXTE DERRIERE L'IMAGE</div><img src="http://img105.imageshack.us/img105/4691/lunaqk2.png"/></div></td></tr></table>

et le css:

Code:


        div.contenant {
            width:200px;  /*largeur du contenant, la meme que celle de l image*/
            height:320px; /*hauteur du contenant, la meme que celle de l image*/
            overflow: hidden;
        }
         div.contenu {
            width: 200px;  /*largeur du contenu, la meme que celle de l image*/
            height: 320px; /*hauteur du contenu, la meme que celle de l image*/
            overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
         }
        .contenant img {
            width:200px; /*largeur de l image*/
            height:320px;  /*hauteur de l image*/
            position: relative;  
           right: 200px; /*ici mettre la hauteur de l image*/
            transition: 0.5s;  /*pour l effet de transition*/
        }
        .contenant:hover img {  /*au survol de la souris sur le bloc*/
            bottom: 640px; /*ici mettre deux fois la hauteur de l image*/
            transition: 0.5s;  /*pour l effet de transition*/
        }


Merci d'avance !

[MlleAlys]

effectivement, le positionnement de l'image n'est pas bon ^^
Voilà la façon dont se positionnent les objets sans css : https://i.servimg.com/u/f58/12/56/43/35/conten10.jpg
Le contenant (en rouge) contient : le contenu et l'image juste en dessous. Puis on limite la taille du contenant, et on fait en sorte que ce qui dépasse n'est plus visible : l'image ne se voit pas. C'est pourquoi on utilise position:relative; dans le css pour la repositionner juste devant le contenu. Ici, on voit qu'il faut la remonter de 320px, c'est à dire mettre dans le css top:-320px; (valeur bien négative pour qu'elle remonte et non pas qu'elle descende ). Or dans votre code css, on trouve à la place right: 200px; ce qui décale l'image vers la gauche sans la remonter : elle est toujours invisible !

De même on passage de la souris sur le contenant, le code propose de décaler l'image encore plus vers le haut en changeant top:-320px; par deux fois la taille de l'image, c'est à dire : top:-640px;
On pourrait aussi déplacer l'image vers le bas en revenant à top:0px; plutôt que -640px, ou encore la déplacer vers la gauche ou la droite avec right ou left plutôt que top ^^

Bref, avec le même code html, un css correct pour ce que vous souhaitez pourrait être celui là :

Code:

div.contenant {
    width:200px;/*largeur du contenant, la meme que celle de l image*/
    height:320px;/*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;
}
div.contenu {
    width: 200px;/*largeur du contenu, la meme que celle de l image*/
    height: 320px;/*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;/*pour apparition d une scroll bar si le texte est trop long*/
}
.contenant img {
    width:200px;/*largeur de l image*/
    height:320px;/*hauteur de l image*/
    position: relative;
    top: -320px;/*ici mettre la hauteur de l image en négatif*/
    transition: 0.5s;/*durée de l effet de transition*/
}
.contenant:hover img {/*au survol de la souris sur le bloc*/
    top: -640px;/*ici mettre deux fois la hauteur de l image en négatif pour un déplacement vers le haut*/
    transition: 0.5s;/*durée de l effet de transition*/
}

[Cramby']

C'est parfait, ça fonctionne, je vous remercie énormément !! Et merci pour le temps que vous avez sacrifier pour m'expliquer !

[MlleAlys]

Ahah, c'est loin d'être un sacrifice !
N'oubliez pas de passer le sujet en résolu en éditant votre premier message ^^

[Cramby']

Voila qui est fait, encore merci