Image qui sort du cadre avec un hover (CSS)
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1 • Partagez
Image qui sort du cadre avec un hover (CSS)
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 :
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 :
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;
Capucci- Nouveau membre
- Messages : 16
Inscrit(e) le : 14/07/2016

» Lightbox sur image avec dimensions intermédiaires par le hover.
» Bandeau d'image avec cadre
» Cadre autour d'une image avec marges ?
» L'avatar sort hors du cadre.
» Problème avec image dans le cadre de réponse
» Bandeau d'image avec cadre
» Cadre autour d'une image avec marges ?
» L'avatar sort hors du cadre.
» Problème avec image dans le cadre de réponse
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Problème avec un script, un code :: Archives des problèmes avec un code
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum