Image qui coulisse et laisse apparaitre un texte derrière

[Hayari]

Bonjour! Voila ça fait plusieurs fois que je vois dans divers forum des images qui coulissent et laisse apparaître quelque chose derrière. J'aimerais savoir comment faire ça. Cet effet est repérable sur ce forum, dans la Pa, au niveau du staff. Au passage de la souris, l'image se  décale vers le haut.

http://blackhill.forumactif.name/

Quelqu'un sait il comment faire ça et me l'expliquer en détail? Ce serait gentil =)))

[MlleAlys]

Bonjour,
Il existe plusieurs codes pour le faire, le principe étant de superposer l'image et le bloc contenant le texte avec une position relative par exemple, puis de modifier cette position au passage de la souris, en lui attribuant un effet de transition. Par exemple :

code html :

Code:

<div class="contenant">
    <div class="contenu">TEXTE DERRIERE L'IMAGE</div>
    <img src="URL DE L'IMAGE"/>
</div>

Voilà une div appelée "contenant", dans laquelle se trouve le texte (lui même dans une div que j'ai appelée "contenu") et l'image.

Et le code css :

Code:

div.contenant {
    width:$$$px;  /*largeur du contenant, la meme que celle de l image*/
    height:$$$px; /*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;
}
 div.contenu {
    width: $$$px;  /*largeur du contenu, la meme que celle de l image*/
    height: $$$px; /*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:$$$px; /*largeur de l image*/
    height:$$$px;  /*hauteur de l image*/
    position: relative;  
    bottom: $$$px; /*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: $$$px; /*ici mettre deux fois la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}

voilà, la vitesse du décalage de l'image au passage de la souris est réglable sur les deux lignes "transition", ici l'image met 0,5 secondes pour se décaler.

Le même principe de code peut également être utilisé pour décaler l'image vers le bas, ou sur un côté

...
est-ce assez clair ? =S

[Hayari]

Oui merci, j'ai bien compris le système maintenant =) ça été assez clair XDD
En tout cas merci infiniment =)
Sujet resolu !