Discussion :

[dhillig]

Bonsoir à tous,
J'ai un titre "About" sur la page d'ouverture que je souhaite agrandir lors du hover. L'agrandissement se fait parfaitement, mais la transition montre un titre "flou", "pixéllisé".
Bref, le titre n'est net qu'au départ et à l'arrivée. J'ai tenté de jouer avec les CSS sans grand succès :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.bmenu{
	position: relative;
	z-index: 1;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50%;
}
.bmenu li{
    font-size: 20px;
    display: block;
}
.bmenu li a{
	color: transparent;
	display: block;
	text-transform: uppercase;
	text-align: center;
		text-shadow: 0px 0px 0px #fff;
 
	letter-spacing: 1px;
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	transform: scale(1);
	-webkit-transition: all 3s linear;
	-moz-transition: all 3s linear;
	-o-transition: all 3s linear;
	-ms-transition: all 3s linear;
	transition: all 3s linear;
}
.bmenu:hover li a{
	text-shadow: 0px 0px 0px #fff;
}
 
.bmenu li a:hover{
	text-shadow: 0px 0px 0px #fff;
	-moz-transform: scale(10);
	-ms-transform: scale(10);
	-o-transform: scale(10);
	-webkit-transform: scale(10);
	transform: scale(10);
}

Le body est bien simple :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div class="content">
    <ul class="bmenu">
      <li><a href="#section-un">About</a></li>
     </ul></div><!-- #content -->

Au cas où qq aurait une idée...
Merci à vous et bonne soirée,
dh

[dhillig]

Bonsoir,
Mon problème en images.
Bonne soirée,
dh

[NoSmoking]

Bonjour,
fixe une largeur à tes <li> cela devrait faciliter le travail du moteur de rendu.

Perso, je trouve le zoom trop important et le délai de transition trop long.

[dhillig]

Bonsoir NoSmoking
Pour le zoom et le délai de transition, tu as parfaitement raison. J'ai un peu tout testé, d'où des valeurs zarb Evidemment, dans mon cas, cela sera optimisé.
Je pensais connaître un minimum en transition*... mais non
Comment et où donnes-tu des largeurs aux <div> ??? Je ne vois pas comment
Merci fidèle NoSomking, et Bonne Soirée,
dh

*j'ai voulu attaquer "PACE", me suis arraché les cheveux....

[NoSmoking]

Comment et où donnes-tu des largeurs aux <div> ???

le plus simplement du monde

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
.la_classe_de_la_div{
  width:10em;   /* par exemple */
}

[dhillig]

Bonsoir NoSmoking,
MERCI MERCI !!! Tout simple (je pensais qu'il fallait donner une largeur à chaque étape ) mais cela fonctionne que sur Firefox; pas sur Safari... et sur Chrome uniquement lors du :hover (quand on est hors de la "zone" hover, le titre se réduit avec le flou/pixellisation avec
Les CSS en cause (?) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.content{
	position: relative;
	width: 10em;
	margin-left: auto;
	margin-right: auto;

et la partie du body :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div id="header">
   <div class="content">
    <ul class="bmenu">
      <li><a href="#section-un">About</a></li>
     </ul></div><!-- #content -->

Merci pour ton aide et bonne soirée !
dh