Faire glisser une image graduellement

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

Résolu Faire glisser une image graduellement

Message par Inkheart le Dim 4 Nov 2012 - 5: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>



Merci d'avance !


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

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 le Lun 5 Nov 2012 - 13:36

Up ? (:

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 le Lun 5 Nov 2012 - 14:10

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

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 le Lun 5 Nov 2012 - 14:12

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

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.
  • 0

Résolu Re: Faire glisser une image graduellement

Message par jonathan78 le Lun 5 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

jonathan78
****

Masculin
Messages : 220
Inscrit(e) le : 07/09/2011

http://www.legendarygraph.com/
jonathan78 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Faire glisser une image graduellement

Message par Inkheart le Lun 5 Nov 2012 - 14:18

Ah oui ! Merci beaucoup ♥

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


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