Bonjour, bonsoir,

tout d'abord voilà le site que j'ai commencé hier :

http://www.yannchapuis.fr/

J'ai un petit problème que je n'arrive pas a régler... c'est le "entrer" de la première page, qui zoom, comme prévu, mais qui se dézoom directement après. Contrairement aux images sur la page d'après, qui restent zoomés tant qu'on a le curseur dessus.

Savez vous d'où ça vient ?

ps : J'ai utilisé le "transform:scale(2);" pour zoomer (plutôt que d'augmenter le size dans le :hover), question d'effets.

Mon code :
___________________________________________________________________________

html{
height:100%;}

body {
background-image:url("../images/bg.jpg");
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
/*height:100%;*/
}

1. au_centre{

margin-top: 18%;
margin-bottom: 18%;
text-align:center;
}

1. entrer {

color:white;
font-size:36;
font-family: 'Lato', sans-serif;
font-weight:100, bold;
margin-top:1%;
margin-bottom:1%;

}

1. entrer a {

padding:0%;
transition-property:height border transform;
transition-duration:1s;

}

1. entrer a:link {

color:white;
font-size:36;
text-decoration : none;
}

1. entrer a:hover {

transform:scale(2);
transition-property:height border transform;
transition-duration:1s;

text-decoration : none;

}

1. entrer a:visited {

color:white;
text-decoration : none;
}

1. integrateur {

color:white;
font-size:36;
font-family:Trajan Pro;
padding-bottom:1%;
border-bottom:dotted;
border-width:1px;
font-family: 'Lato', sans-serif;
font-weight:100;
}

1. creation {

color:white;
font-size:36;
font-family:Trajan Pro;
padding-top:1%;
border-top:dotted;
border-width:1px;
font-family: 'Lato', sans-serif;
font-weight:100;
}

_____________________________________________________________________________

merci d'avance !

Je ne saurais pas t'expliquer le pourquoi (j'ai pas envie de chercher mais je le note dans un coin, ça m'intrigue), mais quand tu passes ton lien en display: block, ton problème est réglé. Probablement un souci de repaint en fin d'animation sur les éléments inline. Bref, en changeant le display de ton lien, ça marche.

Par contre, te dire intégrateur et ne pas respecter un tant soit peu la sémantique html... ouch mes pauvres yeux.

super merci ! :D ça marche !

mais j'ai un autre problème... dès que je fais ce que tu me demande, la page est 2 fois plus large... et j'ai pas l'impression que ça vienne du "scale(2)"

(désolé du double poste, le temps que j'avais pour éditer le précédent poste est passé...)

le problème vient bien du "transform:scale(2);". J'essaye de mettre "font-size:64", et je n'ai pas ce bug. Par contre je reviens au problème que j'avais eu hier... dès que ça zoom, il n'y a que le texte d'en bas "création" qui ce décale, pas "integrateur"..

Oui, c'est logique que la page change de largeur, j'y avais plus pensé sur le moment. Soit tu affectes une taille à ton lien tout en gardant le display block (genre mets 50%, comme ça, en scale 2, ça ne fait que 100%), ou alors tu passes en display inline-block.

Je ne comprends pas trop ce que tu entends par "décale", par contre... chez moi, si je mets le lien en display block ou inline-block, au survol, il grandit pour toucher les deux lignes en pointillés, il ne décale rien.

Oui voilà comme tu dis, il ne décale rien... Je verrais ça demain ^^', dans l'idéal, j'aurais voulu que le bloc "integration" monte et le "creation" descendre en même temps que le "entrer" au survole (hover). Mais je sais pas si c'est possible

Je verrais ça demain '^^ merci beaucoup ! je te tiens au courant