Code pour image coulissante

[Jézebel L.]

Bonjour, Bonsoir à tous,

Je viens vers vous car je voudrais svp changer un peu l'apparence de mon forum rpg et plus particulièrement les catégories.
En fait, je voudrais avoir dans toutes les parties, une image coulissante avec un texte derrière.
Coulissant vers la gauche ou la droite.

Voici une capture écran, des images et du texte que je voudrais mettre derrière les images, qui bien sur seront plus grandes qu'ici afin de cacher tout le texte.



Lien vers le forum rpg : http://monde-oublie.forumactif.com/forum

Ps : j'ai pas accès aux Templates, mais j'ai accès à tous les autres : css, java, etc....

Dans l'attente de votre réponse et de votre aide, merci d'avance

[Flaura]

Bonjour,

mettez ce code dans le css:

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 400px;
  height: 120px;
  overflow: hidden;
  border: 2px solid #000000;
  background-color: #ffffff;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 400px;
  height: 120px;
  margin-left: 0px;
    transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate:hover .cate_img
{
margin-left: 400px;
transform: all;
-moz-transform: all;
-o-transform: all;
-htm-transform: all;
-webkit-transform: all;
transition: 1s;
-moz-transition: 1s;
-o-transition: 1s;
-htm-transition: 1s;
-webkit-transition: 1s;
}
.cate_description
{
  position: relative;
  z-index: 1;
  width: 400px;
  height: 120px;
  margin-top: -120px;
  text-align: justify;
  font-size: 11px;
  color: #8c8c8c;
  padding: 2px;
  overflow: auto;
}

Mettez celui-ci dans la description des forums:

Code:

<div class="cate"><div class="cate_img"><img src="http://illiweb.com/fa/pbucket.gif" /></div><div class="cate_description">Votre description</div></div>
<div style="clear: both;"></div>

Vous n'avez qu'à remplacer la description et l'adresse de l'image. Quand le carré en-dessous de l'image est plein, il y aura une scrollbar, donc pas la peine de s'inquiéter. Si vous voulez d'autres informations pour modifier le code, dites-le-moi.

(le code ne vient pas de moi, mais puisque je l'ai retrouvé...)

[MlleAlys]

Bonjour,

Voilà un code parfaitement similaire mais plus simple et plus reglo dans son codage (par exemple sans marges négatives, ce qui peut éviter quelques problèmes d'affichages avec certains navigateurs) :

- html à copier/coller dans la description de chaque forum :

Code:

<div class="cate">
   <img src="URL DE L'IMAGE ICI" class="cate_img" /> 
   <div class="cate_description">
      VOTRE DESCRIPTION CACHÉE ICI
   </div>
</div>

Et le code css associé à copier/coller dans la feuille de style de votre forum :

Code:

/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */

.cate {
  width: 400px;
  height: 120px;
  overflow: hidden;
  position: relative;
}
.cate_description {
  width:390px;
  height:110px;
  padding: 5px;
  overflow: auto;
}
.cate_img {
  position: absolute;
  min-width: 100%;
  min-height: 100%;
  top: 0;
  left: 0;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  -htm-transition: all 1s ease-out;
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.cate:hover .cate_img {
  left: 100%;
}

/* FIN CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */

[Jézebel L.]

Coucou à vous 2,

MlleAlys et Flaura, je vous remercie d'avoir répondu et de m'avoir donné les codes.

Grâce à vous je vais pouvoir changer l'apparence des catégories du forum rpg.

Problème résolu.