Description coulissante

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

Résolu Description coulissante

Message par Solid6Snake le Juin 20th 2014, 2:05 pm

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 : 521
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 Juin 21st 2014, 9:55 am

Up quelqu'un pour m'aider svp?
avatar

Solid6Snake
*****

Messages : 521
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 Juin 21st 2014, 10:58 am

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!



avatar

Solid6Snake
*****

Messages : 521
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 Juin 21st 2014, 3:59 pm

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 : 4625
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 Juin 22nd 2014, 5:32 pm

Un grand merci!
avatar

Solid6Snake
*****

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