Modifier le sens des transitions

4 participants

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

Résolu Modifier le sens des transitions

Message par elsa2607 Dim 17 Aoû 2014 - 12:22

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 Smile car après mainte et mainte recherches je n'ai rien trouvé.

css:

mercii


Dernière édition par elsa2607 le Mer 20 Aoû 2014 - 22:37, édité 1 fois
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par Neptunia Dim 17 Aoû 2014 - 12:31

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
Neptunia

Neptunia
Membre actif

Féminin
Messages : 17853
Inscrit(e) le : 08/08/2010

https://www.galaxie-series.net/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par elsa2607 Dim 17 Aoû 2014 - 12:54

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
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par Scoubifitz Dim 17 Aoû 2014 - 14:51

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 ...
Scoubifitz

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par elsa2607 Dim 17 Aoû 2014 - 23:13

Merci beaucoup encore une fois Smile !

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.
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le sens des transitions

Message par Scoubifitz Lun 18 Aoû 2014 - 0:17

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

liens - liens - liens - liens
I
M
A
G
E
bienvenueinfo
partenariat
membrefelicitcredits
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
membrefelicitcredits
banniere

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par elsa2607 Lun 18 Aoû 2014 - 4:23

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 :
Modifier le sens des transitions CdX7OG8

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>
         
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le sens des transitions

Message par Scoubifitz Mar 19 Aoû 2014 - 1:04

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

Scoubifitz
Membre actif

Masculin
Messages : 3687
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par elsa2607 Mar 19 Aoû 2014 - 16:20

Merciiiiiii beacoup !!

Cela marche à merveilles *,* je vous remercie
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par Chacha Mar 19 Aoû 2014 - 19:49

Modifier le sens des transitions Check10Bonjour,

Afin de faciliter la gestion des problèmes, si votre problème est résolu, pensez à :
  • éditer votre premier message,
  • cocher l'icône résolu
  • Et enregistrer en cliquant sur Modifier le sens des transitions Envoi10


Vous pouvez également remercier les personnes qui vous ont aidé, en cliquant sur le bouton Modifier le sens des transitions 50378

A bientôt sur ForumActif Smile
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 69301
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Modifier le sens des transitions

Message par elsa2607 Mer 20 Aoû 2014 - 22:36

Oui excusez moi.

Merci beaucoup ça à fonctionné Smile !
elsa2607

elsa2607
***

Féminin
Messages : 161
Inscrit(e) le : 25/09/2011

http://graphisya.forumactif.org/
elsa2607 a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum