Modifier le sens des transitions

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

Résolu Modifier le sens des transitions

Message par elsa2607 le 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:
Code:
.

mercii


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

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 le 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
+ Hyperactif +

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

http://www.planet-series.com/
Neptunia a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Modifier le sens des transitions

Message par elsa2607 le 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
***

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 le 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
+ Hyperactif +

Masculin
Messages : 3539
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 le 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
***

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 le 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
+ Hyperactif +

Masculin
Messages : 3539
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 le 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 :


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

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 le 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
+ Hyperactif +

Masculin
Messages : 3539
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 le Mar 19 Aoû 2014 - 16:20

Merciiiiiii beacoup !!

Cela marche à merveilles *,* je vous remercie

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 le Mar 19 Aoû 2014 - 19:49

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 résolu
  • 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 Smile


Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Chacha
Modéractif
Modéractif

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

http://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 le Mer 20 Aoû 2014 - 22:36

Oui excusez moi.

Merci beaucoup ça à fonctionné Smile !

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


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