Discussion :

[mathieu]

Bonjour,

Je cherche à centrer un bloc dans un autre bloc. Je sais le faire dans une case d'un tableau par exemple mais là je cherche à mettre des effets de transformation donc je ne m'en sors pas.

Dans le code d'exemple que je mis à la suite, je m'approche de ce que je veux mais le texte "un pomme" est déplacé avec des valeurs fixes alors que je voudrais que cela se face automatiquement parce que j'aurai ensuite plusieurs images avec chacune des tailles différentes.

Est ce que vous pouvez déjà me dire si je cherche bien dans la bonne direction ?

Code html :

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

1
2
3
4
<a href="http://www.photo-libre.fr/agriculture_photo.htm?PREVIEW=11.jpg" class="imageSurvol">
	<img src="http://www.photo-libre.fr/agriculture/11.jpg" alt=""/>
	<span>Une pomme</span>
</a>

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
43
44
45
46
47
48
49
a.imageSurvol span {
	float : left;
	/* */
	position : relative;
	top : 100px;
	left : -100px;
	/* */
	// margin : 0 auto;
	/*
	vertical-align : middle;
	text-align : center;
	*/
	-webkit-transform : scale(0.5);
	-moz-transform : scale(0.5);
	-ms-transform : scale(0.5);
	-o-transform : scale(0.5);
	transform : scale(0.5);
}
a.imageSurvol {
	float : left;
	overflow : hidden;
	border : 2px solid #DDF;
}
a.imageSurvol img {
	float : left;
	width : 200px;
}
/* ************************************************************ */
/* effets au survol */
a.imageSurvol:hover img {
	-webkit-transform : scale(2);
	-moz-transform : scale(2);
	-ms-transform : scale(2);
	-o-transform : scale(2);
	transform : scale(2);
}
a.imageSurvol:hover span {
	-webkit-transform : scale(2);
	-moz-transform : scale(2);
	-ms-transform : scale(2);
	-o-transform : scale(2);
	transform : scale(2);
}
a.imageSurvol:hover img, a.imageSurvol:hover span {
	-webkit-transition : all 3s ease 0s;
	-moz-transition : all 3s ease 0s;
	-ms-transition : all 3s ease 0s;
	-o-transition : all 3s ease 0s;
	transition : all 3s ease 0s;

[NoSmoking]

Bonjour,
pas mal de truc à dire et mis en commentaire

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
a.imageSurvol span {
/*    float : left; /* OUT */
    display:block; /* AJOUT */ 
    width:100%;     /* AJOUT */
		/* */
/*    position : relative; /* OUT */
    position : absolute; /* MODIFICATION */
 
    top : 100px;/**/
/*    left : -100px; /* OUT */
    /* */
 
/* Mauvais commentaire  
    // margin : 0 auto;
*/ 
 
    /*
    vertical-align : middle;
    text-align : center;
    */
    text-align : center; /* restauration du centrage    */
 
    -webkit-transform : scale(0.5);
       -moz-transform : scale(0.5);
        -ms-transform : scale(0.5);
         -o-transform : scale(0.5);
            transform : scale(0.5);
}
 
a.imageSurvol {
    position:relative; /* AJOUT pour servir de référent */      
    display:block; /* AJOUT */
    width:200px; /* AJOUT */
/*    float : left; /* OUT */
    overflow : hidden;
    border : 2px solid #DDF;
}
 
a.imageSurvol img {
/*    float : left; /* OUT */
    width : 200px;
}
 
/* ************************************************************ */
/* effets au survol */
a.imageSurvol:hover span, /* on met ICI c'est la même chose que ci dessous */ 
a.imageSurvol:hover img {
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -ms-transform:scale(2);
    -o-transform:scale(2);
    transform: scale(2);
} 
/* OUT
a.imageSurvol:hover span {
    -webkit-transform:scale(2);
    -moz-transform:scale(2);
    -ms-transform:scale(2);
    -o-transform:scale(2);
    transform: scale(2);
}
*/
a.imageSurvol:hover img,a.imageSurvol:hover span {
    -webkit-transition:all 3s ease 0s;
    -moz-transition:all 3s ease 0s;
    -ms-transition:all 3s ease 0s;
    -o-transition:all 3s ease 0s;
    transition: all 3s ease 0s;
} /* manque accolade de fermeture */

voila si je n'ai rien oublié !

[mathieu]

magnifique ça fonctionne comme je veux, merci

par contre je n'ai pas compris ta remarque "a.imageSurvol { position:relative;} /* AJOUT pour servir de référent"
de référent par rapport à quoi ? pour la balise "img" qui est en "position : absolute;" ?

je viens de refaire le tour des tutoriels CSS mais je n'ai rien trouvé à ce sujet

[Invité]

Bonjour,
la réponse est comprise dans la question.

Peut-être as-tu oublié de lire celui-ci : Type de positionnement | position

absolute : retire complètement l'élément du flux et le positionne par rapport à son plus proche ancêtre lui-même positionné (ou par défaut la fenêtre du navigateur) en fonction des propriétés top, right, bottom et left ;

[mathieu]

Peut-être as-tu oublié de lire celui-ci : Type de positionnement | position

j'étais passé sur cet article mais comme je ne suis pas encore beaucoup familiarisé avec CSS, le terme "plus proche ancêtre" ne me disait rien et je pense que je suis passé à la suite en pensant au comportement que j'avais l'habitude de voir c'est à dire un positionnement par rapport à "body"

par contre je ne me rappelle plus si j'ai bien parcouru la FAQ parce que je viens de voir ça qui répond justement à la question
http://css.developpez.com/faq/?page=...calement_block

ou peut-être que je suis passé à côté puisque je ne savais pas trop dans quelle direction chercher
dans tous les cas, je pense avoir compris le fonctionnement donc ça m'ouvre plein de nouvelles possibilités, merci pour ton aide

[NoSmoking]

Une dernière chose que j'ai vu, si tu veux un effet de "dé-zoom" sur le mouseout, un peu brutal dans ton code, il te faut supprimer les :hover sur la dernière déclaration CSS

Code :

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

1
2
3
4
5
6
7
8
a.imageSurvol img,             /* et non a.imageSurvol:hover img, */
a.imageSurvol span {           /* et non a.imageSurvol:hover span */
    -webkit-transition:all 3s ease 0s;
       -moz-transition:all 3s ease 0s;
        -ms-transition:all 3s ease 0s;
         -o-transition:all 3s ease 0s;
            transition: all 3s ease 0s;
} /* manque accolade de fermeture */