Transition d'image: faire disparaitre l'image dans le cadre

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

Résolu Transition d'image: faire disparaitre l'image dans le cadre

Message par kiarie le Lun 18 Avr 2016 - 17:05

Bonjour,

Pour différent éléments de forum comme dans le contexte présent, sur mon PA, j'utilise un code de transition pour qu'en passant la souris sur une image, celle ci se décale sur la droite pour laisser apparaître un texte caché dessous.

Mon souci étant que cette image en ce décalant va se positionner au dessus de celle d'a coté, empêchant de passer directement la souris dessus par la suite.

J'aimerais savoir comment faire disparaître mon image dans le cadre de texte et non qu'elle aille se positionner sur l'autre.



Merci d'avance.

Code:
.textessimage {
  background-color: #333131;
  width: 50px;
  height: 80px;
  overflow: auto;
  font-family: calibri;
  font-size: 10px;
  color: #5B5B5B;
  text-align:center;
}
.imagesrtexte a {
  color: #5B5B5B;
}
.imagesrtexte img {
  margin-top: -80px;
  transition: transform 2s;
  -moz-transition: -moz-transform 3s;
  -o-transition: -o-transform 3s;
  -webkit-transition: -webkit-transform 3s;
}
.imagesrtexte:hover img {
  transform: translateX(+50px);
  -moz-transform: translateX(+50px);
  -o-transform: translateX(+50px);
  -webkit-transform: translateX(+50px);
}


Dernière édition par kiarie le Lun 18 Avr 2016 - 19:15, édité 1 fois

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Transition d'image: faire disparaitre l'image dans le cadre

Message par MlleAlys le Lun 18 Avr 2016 - 17:25

bonjour,
Il ne s'agit pas que de css, mais aussi de structure html : il faut que l'image soit contenue dans un cadre avec un overflow:hidden;
https://jsfiddle.net/MlleAlys/j9r4awp2/

MlleAlys
+ Hyperactif +

Messages : 4405
Inscrit(e) le : 12/09/2012

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

Résolu Re: Transition d'image: faire disparaitre l'image dans le cadre

Message par kiarie le Lun 18 Avr 2016 - 19:15

Ah c'est bon j'ai pu corrigé en apportant cette div supplémentaire. Merci beaucoup Smile

kiarie
****

Féminin
Messages : 269
Inscrit(e) le : 16/07/2004

http://www.life-in-ny.com
kiarie 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