Description coulissante

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

Résolu Description coulissante

Message par Solid6Snake le Ven 20 Juin 2014 - 14:05

Bonjour, je recherche un code (le plus simple possible) pour mettre à la place de mes "descritions" de forum une image ou signature qui au passage du curseur glisserait vers la droite pour laisser place à la descrition du forum!

Exemple: http://www.op-history.net/

Mon forum: http://saigneurs.jeuxvideoforum.com/forum

Merci d'avance pour l'aide  Wink 

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description coulissante

Message par Solid6Snake le Sam 21 Juin 2014 - 9:55

Up quelqu'un pour m'aider svp?

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description coulissante

Message par Solid6Snake le Sam 21 Juin 2014 - 10:58

Bon, je viens de trouver ceci:

http://forum.forumactif.com/t365124-image-coulissante

Une image qui cache un texte ok pour le HTML et ok pour le CSS à modifier.

Mais je ne place rien dans la descritpion de ma catégorie? je ne comprend pas là..

Je redonne mon exemple:

http://www.op-history.net/

Et mon forum:

http://saigneurs.jeuxvideoforum.com/forum

Merci d'avance je ne vais pas lacher sans avoir réussi à faire ça ^^

Bonne journée!




Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Description coulissante

Message par MlleAlys le Sam 21 Juin 2014 - 15:59

Bonjour,

la partie à placer dans la description du forum est celle-ci :
Code:
<div class="contenant">
  <div class="contenu">DESCRIPTION DERRIÈRE L'IMAGE</div>
  <img src="URL DE L'IMAGE"/>
</div>

et le css pour un déplacement à droite à coller dans votre feuille de style, en remplaçant les valeurs par les votres ^^ :
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;
    position: relative;
}
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: absolute;
    left: 0;
    top: 0;
    transition: left 0.5s ease; /*effet de transition*/
}
.contenant:hover img { /*au survol de la souris sur le bloc*/
    left: 200px; /*décalage vers la gauche de la largeur de l image*/
}

MlleAlys
+ Hyperactif +

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

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

Résolu Re: Description coulissante

Message par Solid6Snake le Dim 22 Juin 2014 - 17:32

Un grand merci!

Solid6Snake
****

Messages : 296
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake 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