Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

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 
avatar

Solid6Snake
*****

Messages : 580
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?
avatar

Solid6Snake
*****

Messages : 580
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:

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!



avatar

Solid6Snake
*****

Messages : 580
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*/
}
avatar

MlleAlys
Membre actif

Messages : 4669
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!
avatar

Solid6Snake
*****

Messages : 580
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