Zoomer une image façon thumbnail en CSS

Version imprimable

24/11/2010, 00h44
Bovino

Zoomer une image façon thumbnail en CSS

:salut:

Pascale Lambert vous propose un nouveau tutoriel sur le zoom d'une image à la façon "thumbnail" en CSS. Elle nous y explique comment créer une série de vignettes zoomables à la sauce 100% CSS.

N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

Voir aussi les cours et tutoriels pour apprendre CSS.

Merci à elle :)
13/10/2011, 00h54
Mister Retsim

Amélioration de la 2e technique

Bonjour,

D'abord merci pour le tuto.

Je viens à peine de tester la 2e technique et vu que vous aviez dit ne pas comprendre vous-même l'astuce et bien j'ai l'explication : La magie est de faire disparaître la grande image puis de la faire réapparaître via le pseudo-élément :hover.

Pour cela, on insère l'image dans un bloc grâce à display:bloc. Pour vous convaincre que l'image n'est pas un bloc mais s'insère plutôt dans un bloc, il faut appliquer border-radius et vous verrez que l'image se ''conforme'' aux dimensions du bloc : C'est l’héritage mis en exergue !

Et c'est là, le génie de celui-qui a créer la technique...car pour faire disparaître l'image, il va faire disparaître le bloc qui contient l'image...et pour y arriver, il donne une valeur nulle à la largeur du bloc en question.

To be continued...
13/10/2011, 01h12
Mister Retsim

Amélioration de la 2e technique (suite)

traduction CSS : width:0;

Ensuite, on utilise a:hover .grand et NON a .grand:hoover...Parce qu'en faisant disparaître notre bloc, aucun pixel à l’écran n'est mobilisé pour afficher le bloc disparu...c'est le vide créé et donc :hoover ne marche pas...c'est logique.

Comme cela, on dit à l'ordi que si tu passe sur un lien alors donne tels propriétés à la classe grand.

Et ces propriétés sont : nouvelles dimensions, nouvelle position + autres propriétés CSS...bah selon vos goûts quoi.

Après (encore ?!?)....on sourit....xa marche !!! :ccool:

Amélioration de la 2e technique (dernière partie)

Apres l'explication, voici l'amelioration :

On est pas obligé d'afficher l'image horizontalement car la verticale est aussi possible....on remplace juste la balise <a> par la balise <p>.

De plus, on peut jumeler la technique 1 à mon amelioration et cela donne >>>

Code XHTML :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div>
       <p href="#">
         <img src="votreimage.jpg" alt="xixi" />
         <img src="votreimage.jpg" alt="lili" class="grandos" />
       </p>
 
       <p href="#">
         <img src="votreimage.jpg" alt=''xuxu" />
         <span class="grando">Merci pour le tuto</span>
       </p>
 
       <p href="#">
         <img src="votreimage.jpg" alt="xoxo" />
         <img src="votreimage.jpg" alt="lolo" class="grand"  />
       </p>
     </div>

Code CSS :

Code:

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
70
71
72
73
74
75
body
 {	
 height:500px; 
}
 
img 
{
 border:none;
}	
div
{
 position:absolute; 
 top:10px;
 left:10px; 
}
p
 {
 margin:0px;
 text-decoration:none;
}
.grandos 
{
 display:block;
 position:absolute; 
 width:0; 
}	  
 
p:hover .grandos
{ 
 position:absolute; 
 top:20px;
 left:125px;
 width:225px; 
 height:50px; 
 border-radius:20px;
 border:2px solid black;
 
}
.grando 
{
 display:block;
 position:absolute;
 right:400px;
 top:200px;
 color:white;
}	  
 
p:hover .grando
{ 
 position:absolute; 
 top:130px;
 left:125px;
 width:225px; 
 height:50px; 
 border-radius:20px;
 border:2px solid black;
 color:black;
 text-align:center;
}
.grand 
{
 display:block;
 position:absolute; 
 width:0; 
}	  
p:hover .grand
{ 
 position:absolute; 
 top:220px;
 left:125px;
 width:225px; 
 height:50px; 
 border-radius:20px;
 border:2px solid black;
}

Merci.