Texte depliant au passage souris

[frederique-rko]

Bonjour,

J'aimerais savoir comment faire pour qu'un texte se déplie au passage de la souris, comme s'il surgissait d'un trou (comme un taupe qui sort de la terre)

Je veux un effet de "tirette"
Comme si y'avait un papier dans une boite qui dépasse et quand on passe la souris dessus ça sort de la boite (comme sur l'illustration)

voici illustration en image.



Merci pour votre aide

[MlleAlys]

Bonjour,
voilà un code qui devrait donner l'effet désiré :

html :

Code:

<div class="tirette">
    <div class="contenu">
        blablabla
    </div>
</div>

css :

Code:

/*cadre effet tirette*/
.tirette {
    border-bottom: 1px solid black; /*ligne du bas*/
    padding : 0 10px;
    margin:5px;  /*marge*/
    width:150px; /*largeur du bloc*/
    height:200px;  /*hauteur du bloc*/
    position:relative;
    overflow:hidden;  /*pour cacher ce qui depasse*/
}
.contenu {
    height:200px; /*hauteur du bloc*/
    width:146px; /*largeur du bloc*/
    box-shadow: 0 0 3px black; /*ombre*/
    border:1px solid black; /*contour du bloc*/
    padding:2px; /*marge interieure*/
    position: absolute;
    top:150px; /*position normale abaissée de 150px*/
    left:10px;
    transition: top 0.8s ease-out; /*effet de transition glissée*/
}
.contenu:hover {
    top:0px; /*position au passage de la souris*/
}
/*fin cadre effet tirette*/

ce qui doit donner ceci : http://jsfiddle.net/UPYG5/

[frederique-rko]

Merci MlleAlys, c'est exactement ça    sauf que j'y suis pas arrivée

Faut aller dans Module    HTML & JAVASCRIPT    Gestion des pages HTML   
Création en mode avancé HTML   

Et ensuite .... J'avoue que je ne sais pas trop

Et sinon pour le CSS, on peut coller ça n'importe où ?

Y'a-t-il aussi moyen de personnaliser ? Par exemple en mettant autre chose qu'une simple barre (genre un cadre fantaisie...)

[MlleAlys]

tout dépend de l'endroit où vous souhaitez le voir apparaitre ^^
mais l'option des pages html dans les modules permet de créer de nouvelles pages, surement souhaitez vous l'afficher sur une page du forum déjà existante ? où exactement ? Et dans ce cas le code css sera copié/collé dans apparence>couleurs>feuille de style css ^^
et oui, le code est personnalisable, mais surement via de petites modifications en fonction de ce que vous souhaitez faire.

[frederique-rko]

C'est bon j'ai réussi à faire ce que je voulais dans l'ensemble. Merci MlleAlys

Par contre je voulais savoir si on pouvait personnaliser en mettant par exemple une bordure double trait, changer la couleur du trait, mettre une image en fond ....

[MlleAlys]

pour modifier l'apparence de la bordure du bloc coulissant, il faut modifier cette ligne là du code css :

Code:

border:1px solid black; /*contour du bloc*/

en la remplaçan par exemple par :

Code:

border:3px double red; /*contour du bloc*/

pour une bordure double de 3px de large et de oculeur rouge ^^

pour ajouter une image de fond, ajoutez au même bloc une ligne ainsi :

Code:

backround-image: url(URL DE L'IMAGE); /*image de fond du bloc*/

en remplaçant URL DE L'IMAGE par l'url de l'image que vous souhaitez.
Ce qui donne par exemple :

Code:

/*cadre effet tirette*/
.tirette {
    border-bottom: 1px solid black; /*ligne du bas*/
    padding : 0 10px;
    margin:5px;  /*marge*/
    width:150px; /*largeur du bloc*/
    height:200px;  /*hauteur du bloc*/
    position:relative;
    overflow:hidden;  /*pour cacher ce qui depasse*/
}
.contenu {
    height:200px; /*hauteur du bloc*/
    width:146px; /*largeur du bloc*/
    box-shadow: 0 0 3px black; /*ombre*/
    border:3px double red; /*contour du bloc*/
    background-image: url(URL DE L'IMAGE); /*image de fond du bloc*/
    padding:2px; /*marge interieure*/
    position: absolute;
    top:150px; /*position normale abaissée de 150px*/
    left:10px;
    transition: top 0.8s ease-out; /*effet de transition glissée*/
}
.contenu:hover {
    top:0px; /*position au passage de la souris*/
}
/*fin cadre effet tirette*/

[frederique-rko]

Milles merci MlleAlys, je pense désormais réussir à m'en sortir. Sincères remerciements pour votre aide précieuse.