Discussion :

[GyZmoO]

Salut a tous !

Je vous expose mon problème :

- j'ai des images miniatures, quand je les survole j'aimerais que les images "taille réelle" s'affiche !

Pour le moment j'ai fait ç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
 
#photo
{
 margin : 0;
 padding : 0;
 width : 100px;
 height: 75px;
 border : 0;
 background-image :  url("ptite.jpg");
}
 
#photo:hover
{
 margin : 0;
 width : 550px;
 height : 413px;
 padding : 0;
 border : 0;
 background-image : url("gde.jpg");
}

Ca marche, MAIS, si j'ai 10 photos j'ai pas envie de définir 10 identifiants chacun avec :hover etc ... Donc, ya t il un moyen de faire ça de manière "automatique" en CSS ?

J'espère avoir été assez clair et je vous remercie par avance

Mickaël.

PS : j'ai consulté la FAQ et survolé quelques cours et tutos mais j'ai rien trouvé !

[royto]

Si tu veux utiliser 2 images, ça ne sera pas possible.

Mais ce que tu peux faire c'est un truc dans ce genre :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#photo
{
 margin : 0;
 padding : 0;
 width : 25%;
 height: 25%;
 border : 0;
}
 
#photo:hover
{
 width : 100%;
 height : 100%;
}

[GyZmoO]

Tout d'abord merci pour ta réponse !

Ensuite, si j'ai bien compris ton astuce, le problème reste le même si j'ai plusieurs photos non??

[Bisûnûrs]

Dans ce cas-là définis des classes et non des id.