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

2 participants

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

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

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

kiarie
****

Féminin
Messages : 281
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 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

MlleAlys
Membre actif

Messages : 5747
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 Lun 18 Avr 2016 - 19:15

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

kiarie
****

Féminin
Messages : 281
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

- Sujets similaires

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