Image qui coulisse et laisse apparaitre un texte derrière

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Image qui coulisse et laisse apparaitre un texte derrière

Message par Hayari le Dim 13 Oct 2013 - 11:40

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 =)))


Dernière édition par Hayari le Dim 13 Oct 2013 - 17:27, édité 1 fois

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui coulisse et laisse apparaitre un texte derrière

Message par MlleAlys le Dim 13 Oct 2013 - 14:10

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é Wink

...
est-ce assez clair ? =S

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Image qui coulisse et laisse apparaitre un texte derrière

Message par Hayari le Dim 13 Oct 2013 - 15:39

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

Hayari
****

Féminin
Messages : 230
Inscrit(e) le : 30/04/2012

http://t-i-s.forumactif.org/
Hayari a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum