Image qui sort du cadre avec un hover (CSS)

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

Résolu Image qui sort du cadre avec un hover (CSS)

Message par Capucci le Dim 28 Aoû 2016 - 16:45

Version du forum : phpBB3
Poste occupé : fondateur avec droits sur les templates
Navigateurs concernés : tous ?

Bonjour à tous !
C'est avec le CSS que je me bats aujourd'hui. J'ai touché à mon CSS au niveau de l'affichage des profils dans les sujets. Avec un hover, l'avatar se déplace donc, seulement voilà : j'ai mis un espèce de "cadre" derrière l'avatar, et celui-ci en sort au survol de la souris. J'ai essayé plusieurs choses mais n'arrive pas à voir qu'est-ce qui cloche à vrai dire... L'image ne veut décidément pas se couper d'elle-même au-delà de la limite (les 410px de ma balise "fondavatar" plus bas).

Comme une image vaut cents mots : http://lumargile.forumactif.com/t5-topic-demonstration

Et le CSS qui accompagne l'avatar :
Code:
.fondavatar /*LIMITES DERRIERE PROFIL*/{
  width: 200px;
  height: 410px; !important!
  margin: 0px auto;
  background-color: #000;
  position: relative;
  text-align: center;
  color: #fff;
 }


  .avatarbloc /*COULEUR DERRIERE AVATAR*/ {
  width: 200px;
  height: 320px;
  positiON: relative;
  top: 0px;
  left: 0px;
  background-color: #999;
  z-index: 2;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;
 }

.avatar1 /*IMG AVATAR*/{}

.avatar1:hover{
  height:100px;
  top: 310px;
  left: 0px;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s linear 0s;
      -o-transition: all 1s linear 0s;}
 

.avatarbloc:hover{
  height:100px;
  top: 310px;
  left: 0px;
  transition: all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out 0s;
  -moz-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;

 }

merci d'avance à qui prendra le temps de se pencher sur le souci, et bonne journéeeee

EDIT : j'ai finalement trouvé (c'était très intense), il manquait une ligne toute bête :
Code:
overflow: hidden;
dans le css du "cadre". j'espère que ça pourra aider quelques personnes à l'avenir au moins !

Capucci
Nouveau membre

Messages : 16
Inscrit(e) le : 14/07/2016

Capucci 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