Description coulissante

2 participants

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

Résolu Description coulissante

Message par Solid6Snake 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

Solid6Snake
*****

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

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

Résolu Re: Description coulissante

Message par Solid6Snake Sam 21 Juin 2014 - 9:55

Up quelqu'un pour m'aider svp?
Solid6Snake

Solid6Snake
*****

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

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

Résolu Re: Description coulissante

Message par Solid6Snake Sam 21 Juin 2014 - 10:58

Bon, je viens de trouver ceci:

https://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

Solid6Snake
*****

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

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

Résolu Re: Description coulissante

Message par MlleAlys 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

MlleAlys
Membre actif

Messages : 5767
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 Dim 22 Juin 2014 - 17:32

Un grand merci!
Solid6Snake

Solid6Snake
*****

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

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

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

- Sujets similaires

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