Faire glisser une image graduellement

2 participants

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

Résolu Faire glisser une image graduellement

Message par Inkheart Dim 04 Nov 2012, 05:32

Bonjour !
Donc présentement, dans mes descriptions de catégorie, j'ai une image et lorsqu'on la survole, celle-ci disparait en un seul coup et laisser place au texte qui est écrit en dessous. Personnellement, j'aimerais avoir quelque chose de plus graduel, je ne sais pas si c'est possible. Au survol, il faudrait que l'image se déplace tranquillement vers la droite.


Voici le code CSS
Code:
/* CODES CSS CATEGORIES AUX DESCRIPTIONS CACHEES */


.cate
{
  width: 350px;
  height: 100px;
  overflow: hidden;
  border: 2px dotted #525252;
  background-color: #787878;
}
.cate_img
{
  position: relative;
  z-index: 2;
  width: 350px;
  height: 100px;
  margin-left: 2px;
    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: 350px;
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: 350px;
  height: 100px;
  margin-top: -100px;
  text-align: justify;
  font-size: 11px;
  color: #ffffff;
  padding: 0px;
  overflow: auto;
}


Et voici le code HTML
Code:
<center><div class="cate"><div class="cate_img"><img src="LIEN IMAGE" /></div><div class="cate_description">TEXTE</div></div><div style="clear: both;"></div></center>

Faire glisser une image graduellement Test_b10

Merci d'avance !


Dernière édition par Inkheart le Lun 05 Nov 2012, 13:38, édité 1 fois
Inkheart

Inkheart
**

Féminin
Messages : 78
Inscrit(e) le : 16/02/2010

http://mad-world.forum-canada.com/
Inkheart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire glisser une image graduellement

Message par Inkheart Lun 05 Nov 2012, 13:36

Up ? (:
Inkheart

Inkheart
**

Féminin
Messages : 78
Inscrit(e) le : 16/02/2010

http://mad-world.forum-canada.com/
Inkheart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire glisser une image graduellement

Message par Anya31 Lun 05 Nov 2012, 14:10

c'est pour quel forum ?
car celui de votre profil n'a rien à voir avec votre capture
Anya31

Anya31
****

Masculin
Messages : 383
Inscrit(e) le : 10/12/2010

http://touslesloulous.forumactif.com/index.htm
Anya31 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire glisser une image graduellement

Message par Inkheart Lun 05 Nov 2012, 14:12

Ah oui ! o:
J'ai modif et voici le lien ;
http://mad-world.forum-canada.com/
Inkheart

Inkheart
**

Féminin
Messages : 78
Inscrit(e) le : 16/02/2010

http://mad-world.forum-canada.com/
Inkheart a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire glisser une image graduellement

Message par Invité Lun 05 Nov 2012, 14:15

Bonjour ^^

Je vois bien l'animation de l'image sur la droite moi Smile
C'est peut-être à cause du navigateur Smile
Mais essaye avec ce code dans ton CSS:



Je pense que ça devrais fonctionner... Very Happy
Anonymous

Invité
Invité


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

Résolu Re: Faire glisser une image graduellement

Message par Inkheart Lun 05 Nov 2012, 14:18

Ah oui ! Merci beaucoup ♥
Inkheart

Inkheart
**

Féminin
Messages : 78
Inscrit(e) le : 16/02/2010

http://mad-world.forum-canada.com/
Inkheart 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