Modifier le sens des transitions

[elsa2607]

Bonjour,
Je voudrais modifier le sens de transition de mes image sur le PA :
http://graphisyabeta.graphforum.com/
L'image remonte vers le haut et je me demandais si elles pouvaient coulisser ver la droite, la gauche ou encore en diagonale. Si quelqu'un pouvais me 'expliquer s'il vous plait car après mainte et mainte recherches je n'ai rien trouvé.

css:

mercii

[Neptunia]

Bonjour ^^

Pour inverser le sens de rotation verticale, il suffirait de remplacer les bottom par des top
Pour des rotations horizontales il faudrait les remplacer par des left ou right avec comme valeur la largeur de l'image

[elsa2607]

merci de la réponse, je viens d'essayer :

Code:

.contenant2 img {
    width:260px; /*largeur de l image*/
    height:190px;  /*hauteur de l image*/
    position: relative; 
    top: 190px; /*ici mettre la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}
.contenant2:hover img {  /*au survol de la souris sur le bloc*/
    top: 380px; /*ici mettre deux fois la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}


rien ne change,

j'ai testé :

Code:

/***************************SOTW***************/
div.contenant2 {
    width:260px;  /*largeur du contenant, la meme que celle de l image*/
    height:190px; /*hauteur du contenant, la meme que celle de l image*/
    overflow: hidden;

}
 div.contenu2 {
    width: 260px;  /*largeur du contenu, la meme que celle de l image*/
    height: 190px; /*hauteur du contenu, la meme que celle de l image*/
    overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
background:#3b3b3b;
 }
.contenant2 img {
    width:260px; /*largeur de l image*/
    height:190px;  /*hauteur de l image*/
    position: relative; 
    left: 260px; /*ici mettre la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}
.contenant2:hover img {  /*au survol de la souris sur le bloc*/
    left: 520px; /*ici mettre deux fois la hauteur de l image*/
    transition: 0.5s;  /*pour l effet de transition*/
}

le résultat : http://graphisyabeta.graphforum.com/ l'image n’apparaît plus

[Scoubifitz]

bonjour,

toujours ce souci de position relative et absolute ?

bon ... il faut placer une position relative pour le contenant et une position absolute pour l'image du contenant .

l'image sera placée en haut à gauche dans le contenant , en absolu.

le déplacement se fera par rapport à cette position .

Code:

div.contenant2 {
    width:260px;  /*largeur du contenant, taille de l image*/
    height:190px; /*hauteur du contenant, taille de l image*/
    overflow: hidden;
    position: relative;
}
.contenant2 img {
    position: absolute; /* par rapport au contenant */
    top: 0; /* en haut */
    left: 0; /* a gauche */
    transition: 0.5s;  /*pour l effet de transition*/
}
.contenant2:hover img {  /*au survol de la souris sur l image*/
    top:190px; /* hauteur de l image - deplacement vers le bas */
    transition: 0.5s;  /*pour l effet de transition*/
}

si vous voulez un déplacement à droite , remplacez .contenant2:hover img par :

Code:

.contenant2:hover img {  /*au survol de la souris sur l image*/
    left:260px; /* largeur de l image - deplacement vers la droite */
    transition: 0.5s;  /*pour l effet de transition*/
}

si vous voulez un déplacement à gauche, remplacez .contenant2:hover img par :

Code:

.contenant2:hover img {  /*au survol de la souris sur l image*/
    left:-260px; /* largeur de l image - deplacement vers la gauche - valeur negative */
    transition: 0.5s;  /*pour l effet de transition*/
}

si vous voulez un déplacement en haut , remplacez .contenant2:hover img par :

Code:

.contenant2:hover img {  /*au survol de la souris sur l image*/
    top:-190px; /* hauteur de l image - deplacement vers le haut - valeur negative */
    transition: 0.5s;  /*pour l effet de transition*/
}

si vous voulez un déplacement en diagonale , remplacez .contenant2:hover img par :

Code:

.contenant2:hover img {  /*au survol de la souris sur l image*/
    top:190px; /* hauteur de l image - deplacement vers le bas */
    left:260px; /* largeur de l image - deplacement vers la droite */
    transition: 0.5s;  /*pour l effet de transition*/
}

pour les autres diagonales , jouez avec les valeurs négatives ...

[elsa2607]

Merci beaucoup encore une fois !

J'ai une autre question s'il vous plait :
Sur ce même PA, (cellules des nouveautés en haut à droite) j'ai imposé une largeur mais ça ne fonctionne pas :/ j'ai fais quelques recherche et je n'ai rien trouvé. Il y a comme un bug, la balise height marche mais la widht ne fonctionne pas :

Code:

<td align="left" valign="top" style="background:#3b3b3b;width: auto; height: 200px;width:230;">
             <br /> <strong>14/07/14 | Ouverture du forum</strong>
            <div class="newgr">
                24/06/14| Forum en construction :) .
            </div><strong> 19/06/14 | Création du forum.</strong>
            <div class="newgr">
                <span style="color: #003300;"><strong>15/07/14</strong> |SOTW 1 OUVERTE</span>
            </div><strong>--/--/-- | Texte </strong> <strong>--/--/--</strong> | Texte <strong> <br /> </strong>
         </td>

Merci de l'attention.

[Scoubifitz]

ben , comme c'est un tableau de 4 cellules de large :

liens - liens - liens - liens
I M A G E	bienvenue		info
	partenariat
	membre	felicit	credits
banniere

"info" aura la même largeur que "credits"

il faudrait relier "bienvenue" et "info" , supprimant la cellule de droite , et un colspan="3" pour la cellule de gauche ...

liens - liens - liens - liens
I M A G E	( div bienvenue ) - ( div info )
	partenariat
	membre	felicit	credits
banniere

mettre les "div" en display:inline-block; en leur donnant une largeur définie ...

[elsa2607]

merci beaucoup pour l'attention.
Le bloc ne reste pas sur la ligne malgré display:inline-block;
J'ai testé plusieurs choses mais ça ne fonctionne pas voila mon schéma pour les dimensions :


et la ligne du tableau concernée :

Code:

<td align="left" valign="top" colspan="2" style="width: 680px; height: 200px;">
            
            <div style="display:inline-block; height:450px;" class="contenant1">
               
               <div class="contenu1">
                   <span style="font-size: 24px;font-family: Miniver;color: rgb(178, 239, 73); align: center;"></span>
                  <div style="font-size: 24px; font-family: Miniver; color: rgb(178, 239, 73);" align="center">
                      Le monde de Graphisya
                  </div><span style="font-size: 24px;font-family: Miniver;color: rgb(178, 239, 73); align: center;"></span>
                  <div align="center" style="font-family: 'Handlee', cursive;font-size: 15px;">
                      Bienvenue sur graphisya l'esprit du graphisme ! Le concept de ce forum est simple : s'amuser. Que vous soyez débutants ou vétérans vous êtes les bienvenues parmi nous !! Nous proposons des analyses de bannières pour que tu t'améliores ou encore des tutoriels et des cours :). Nous proposons également des créations en libre service pour vos forum, ainsi vous pouvez passer commande sous quelques conditions de crédits. Sans oublier les nombreux concours à venir et pourquoi pas inter-forums avec partenaires ! Une partie détente vous sera proposée.
                  </div>
                  
               </div>
                <img src="http://i.imgur.com/iATfWrt.png" />
            </div>
            
            <div align="left" valign="top" style="background:#3b3b3b;width: 230; height: 200px;display:inline-block;">
                <br /> <strong>14/07/14 | Ouverture du forum</strong>
               <div class="newgr">
                   24/06/14| Forum en construction :) .
               </div><strong> 19/06/14 | Création du forum.</strong>
               <div class="newgr">
                   <span style="color: #003300;"><strong>15/07/14</strong> |SOTW 1 OUVERTE</span>
               </div><strong>--/--/-- | Texte </strong> <strong>--/--/--</strong> | Texte <strong> <br /> </strong>
            </div>
            
         </td>
         

[Scoubifitz]

j'ai préféré reprendre le tableau dans son entier , avec le CSS ...

Code:

<table style=" border-collapse:collapse ;border: 2px solid #414141;" cellpadding="3">
<tr>
<td style="height: 20px; background:#b2ef49;text-align:center" colspan="4">
<span style="font-family: 'Nova Square', cursive;color:#000;font-size:15px;text-shadow: 1px 1px #96c93e;"> - <a style="color:#000;" href="http://graphisya.forumactif.org/t3-reglement-general">Règlement</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/f4-partenariats">Partenariats</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/t5-vos-questions">Questions</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/t6-les-roles-et-les-recrutements-ouverts">Rôles</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/f7-concours-officiels">Concours</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/c6-tutoriels">Tutoriels</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/f16-les-ressources">Ressources</a> - <a style="color:#000;" href="http://graphisya.forumactif.org/f15-les-galeries">Galerie</a> -</span>
</td>
</tr>
<tr>
<td style="width: 140px;vertical-align:top;" rowspan="3">
<div class="infobulle1">
<img src="http://i.imgur.com/7sYkiJx.png" class="rotationimg"/> <span> Contenu de L'Infobulle </span>
</div>
</td>
<td style="vertical-align:top;" colspan="3">
<div class="contenant1" style="float:left;">
<div class="contenu1">
<div style="font-size: 24px; font-family: Miniver; color: rgb(178, 239, 73);text-align:center;">
Le monde de Graphisya
</div>
<div style="font-family: 'Handlee', cursive;font-size: 15px;text-align:center;">
Bienvenue sur graphisya l'esprit du graphisme ! Le concept de ce forum est simple : s'amuser. Que vous soyez débutants ou vétérans vous êtes les bienvenues parmi nous !! Nous proposons des analyses de bannières pour que tu t'améliores ou encore des tutoriels et des cours :). Nous proposons également des créations en libre service pour vos forum, ainsi vous pouvez passer commande sous quelques conditions de crédits. Sans oublier les nombreux concours à venir et pourquoi pas inter-forums avec partenaires ! Une partie détente vous sera proposée.
</div>
</div>
<img src="http://i.imgur.com/iATfWrt.png"/>
</div>
<div style="background:#3b3b3b;height:200px;float:right;width:230px;">
<br/>
<strong>14/07/14 | Ouverture du forum</strong>
<div class="newgr">
24/06/14| Forum en construction :) .
</div>
<strong>19/06/14 | Création du forum.</strong>
<div class="newgr">
<span style="color: #003300;"><strong>15/07/14</strong> |SOTW 1 OUVERTE</span>
</div>
<strong>--/--/-- | Texte </strong> <strong>--/--/--</strong> | Texte <strong>
<br/></strong>
</div>
</td>
</tr>
<tr>
<td colspan="3" align="left" valign="top" height="105">
PARTENARIATS
</td>
</tr>
<tr>
<td style="width: 260px; height: 190px;" align="left" valign="top">
<div class="contenant3">
<div class="contenu3">
<br/>
<div style="font-family: 'Pacifico', cursive; color: rgb(178, 239, 73); font-size: 30px;" align="center">
Membre Star
</div>
<div style="font-family: 'Pacifico', cursive; color: #2fc9a2; font-size: 30px;" align="center">
<a style="color:#2fc9a2;" href="http://graphisya.forumactif.org/u10">Chup'</a> <img alt="" src="http://i.imgur.com/JkHL1j2.png" border="0"/>
</div>
<img src="http://i.imgur.com/bPXNlpg.png" alt="" border="0"/>
</div>
</div>
</td>
<td style="width: 260px; height: 190px;" align="left" valign="top">
<div class="contenant2">
<div class="contenu2">
<br/>
<div style="font-family: 'Pacifico', cursive; color: rgb(178, 239, 73); font-size: 30px;" align="center">
Félicitations
</div>
<div style="font-family: 'Pacifico', cursive; color: #2fc9a2; font-size: 30px;" align="center">
<a style="color:#2fc9a2;" href="http://graphisya.forumactif.org/u10">Chup'</a>
</div>
<br/>
<a style="color:#999;" href="http://graphisya.forumactif.org/t126-sotw-1-vote"></a>
<div style="color: rgb(153, 153, 153); font-size: 20px;" align="center">
SOTW 1
</div>
<a style="color:#999;" href="http://graphisya.forumactif.org/t126-sotw-1-vote"></a>
</div>
<img src="http://i.imgur.com/l89Ad6T.png"/>
</div>
</td>
<td>
<div class="contenant">
<div class="contenu">
<span style="font-size: 10px;"> <br/></span>
<div style="font-family: 'Pacifico', cursive; color: rgb(178, 239, 73); font-size: 30px;" align="center">
Crédits
</div>
<div style="padding:2px;" align="center">
Forum, panneau d’accueil, graphisme et catégories by Nazka. Qeel by never utopia. Epicode. Merci aux membres pour leurs idées.
</div>
</div>
<img src="http://i.imgur.com/mX7EX5a.png"/>
</div>
</td>
</tr>
<tr>
</tr>
<tr>
<td colspan="4" style="width: 820px; height: 20px; background:#b2ef49; " align="left" valign="top">
<marquee>
<span style="font-family: 'Handlee', cursive; color: #000; font-size: 20px;"><strong>Flash New:</strong></span><span style="font-family: 'Handlee', cursive; color: #000; font-size: 20px;"> Venez donner votre avis sur le nouveau thème. N'oubliez pas la SOTW. </span>
</marquee>
</td>
</tr>
</table>

la partie CSS pour les 4 panneaux coulissants :

Code:

/*          Membre du mois          */

div.contenant3 {
width:260px;  /*largeur du contenant, taille de l image*/
height:190px; /*hauteur du contenant, taille de l image*/
overflow: hidden;
position: relative;
}
.contenant3 img {
position: absolute; /* par rapport au contenant */
top: 0; /* en haut */
left: 0; /* a gauche */
transition: 0.5s;  /*pour l effet de transition*/
}
.contenant3:hover img {  /*au survol de la souris sur l image*/
top:190px; /* hauteur de l image - deplacement vers le bas */
transition: 0.5s;  /*pour l effet de transition*/
}

/*          SOTW          */

div.contenant2 {
width:260px;  /*largeur du contenant, taille de l image*/
height:190px; /*hauteur du contenant, taille de l image*/
overflow: hidden;
position: relative;
background: #2a2a2a;
}
.contenant2 img {
position: absolute; /* par rapport au contenant */
top: 0; /* en haut */
left: 0; /* a gauche */
transition: 0.5s;  /*pour l effet de transition*/
}
.contenant2:hover img {  /*au survol de la souris sur l image*/
left:-260px; /* largeur de l image - deplacement vers la gauche - valeur negative */
transition: 0.5s;  /*pour l effet de transition*/
}

/*          WELCOM          */

div.contenant1 {
width:450px;  /*largeur du contenant, taille de l image*/
height:200px; /*hauteur du contenant, taille de l image*/
overflow: hidden;
position: relative;
}
 div.contenu1 {
width: 450px;  /*largeur du contenu, la meme que celle de l image*/
height: 200px; /*hauteur du contenu, la meme que celle de l image*/
overflow: auto;  /*pour apparition d une scroll bar si le texte est trop long*/
background:#3b3b3b;
}
.contenant1 img {
position: absolute; /* par rapport au contenant */
top: 0; /* en haut */
left: 0; /* a gauche */
transition: 0.5s;  /*pour l effet de transition*/
}
.contenant1:hover img {  /*au survol de la souris sur le bloc*/
top: -200px; /* hauteur de l image - deplacement vers le haut - valeur negative */
transition: 0.5s;  /*pour l effet de transition*/
}

/*          CREDITS          */

div.contenant {
width:160px;  /*largeur du contenant, la meme que celle de l image*/
height:190px; /*hauteur du contenant, la meme que celle de l image*/
overflow: hidden;
position: relative;
}
div.contenu {
width: 160px;  /*largeur du contenu, la meme que celle de l image*/
height: 190px; /*hauteur du contenu, la meme que celle de l image*/
overflow: auto;  /* scroll bar si le texte est trop long */
background:#3b3b3b;
 }
.contenant img {
position: absolute; /* par rapport au contenant */
top: 0; /* en haut */
left: 0; /* a gauche */
transition: 0.5s;  /*pour l effet de transition*/
}
.contenant:hover img {  /*au survol de la souris sur le bloc*/
top: -190px; /* hauteur de l image - deplacement vers le haut - valeur negative */
transition: 0.5s;  /*pour l effet de transition*/
}

[elsa2607]

Merciiiiiii beacoup !!

Cela marche à merveilles *,* je vous remercie

[Chacha]

Bonjour, Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à : éditer votre premier message, cocher l'icône Et enregistrer en cliquant sur Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton A bientôt sur ForumActif

[elsa2607]

Oui excusez moi.

Merci beaucoup ça à fonctionné !