Code pour image coulissante

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

Résolu Code pour image coulissante

Message par Jézebel L. le Mar 16 Fév 2016 - 22:15

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 Smile


Dernière édition par Jézebel L. le Ven 19 Fév 2016 - 20:29, édité 1 fois

Jézebel L.
****

Féminin
Messages : 206
Inscrit(e) le : 02/05/2011

http://monde-oublie.forumactif.com/
Jézebel L. a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour image coulissante

Message par Flaura le Mer 17 Fév 2016 - 15:01

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://i166.photobucket.com/albums/u106/chidori-chan_01/onakiri.png" /></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é...)

Flaura
****

Féminin
Messages : 346
Inscrit(e) le : 07/06/2014

http://pokemondm.pokemonrpg.org
Flaura a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Code pour image coulissante

Message par MlleAlys le Mer 17 Fév 2016 - 15:29

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 */

MlleAlys
+ Hyperactif +

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

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

Résolu Re: Code pour image coulissante

Message par Jézebel L. le Ven 19 Fév 2016 - 20:29

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.

Jézebel L.
****

Féminin
Messages : 206
Inscrit(e) le : 02/05/2011

http://monde-oublie.forumactif.com/
Jézebel L. 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