:hover pour image et titre différent

**carjo** · 22/01/2014, 20h38

Bonjour,

J'ai conçu une galerie de photos sur mon site avec l'aide de:

http://plambert.developpez.com/tutor...mage-vignette/

et ça fonctionne très bien. (merci à l'auteure)

Maintenant je souhaiterais ajouter, en dessous de chaque photo zoomée, un commentaire texte, différent pour chaque photo.

J'ai fait de nombreuses recherches dans ce sens, mais je n'ai rien trouvé de spécifique.

Auriez-vous une piste ?

merci

**cadoudal56** · 23/01/2014, 10h14

Bonjour,

C'est faisable, mais tu ne trouveras pas de réponse dans cette section du Forum. A mon humble avis cela passera par de l'utilisation de Javascript et il faudrais donc placer ta question dans le sous forum ad hoc.

@+

**NoSmoking** · 23/01/2014, 19h01

Bonjour,

Envoyé par carjo

Maintenant je souhaiterais ajouter, en dessous de chaque photo zoomée, un commentaire texte, différent pour chaque photo.

il te faut changer la structure de la page en mettant ton image agrandie dans un conteneur avec le texte à afficher.
C'est sur se conteneur qu'il te faudra jouer en l'affichant/cachant.

Comme le code est ancien, IE ne supportait pas le hover sur autre chose que des balises A, tu peux le dépoussiérer mais le principe reste le même.

**carjo** · 23/01/2014, 21h03

J'ai tenté de faire comme ça, mais ça n'a pas fonctionné. À la suite de plusieurs recherches, je n'ai également rien trouvé qui puisse m'aider.

Auriez-vous un exemple ou un tuto précisément à ce sujet ?

Merci!

**NoSmoking** · 23/01/2014, 21h52

À la suite de plusieurs recherches, je...

je ne penses pas que tu ais bien forcé

D'après l'exemple du tuto cela pourrais donner ceci

Code html :

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
70
71
72
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<base href="http://plambert.developpez.com/tutoriel/css/zoomer-image-vignette/fichiers/">
<!-- Date de création: 07/02/06 -->
<title>CSS Debutant : Zoom d'images façon thumbnail (vignettes) en CSS - Méthode 2</title>
<style type="text/css">
body {
  background-color:black;
  color:white;
}
#galerie{
  position:relative;
  margin:0;
  padding:0;
}
#galerie img{
  border:1px solid black;
}
#galerie li {
  margin:0;
  padding:0;
  text-decoration:none;
  float:left;
}
#galerie p{
  text-align:center;
}
#galerie li div.grand{
  display:none;
  position:absolute;
  text-align:center;
  top:80px;
  left:0px;
  width:306px; /* pour tenir compte des bordures */
}
#galerie li:hover div.grand{
  display:block;
}
</style>
</head>
<body>
<h1>Zoom d'images façon thumbnail - Méthode 2 -</h1>
<p>Passer le curseur de la souris sur les miniatures pour voir les photos en grand</p>
<div class="thumb">
  <ul id="galerie">
    <li>
      <img src="100_inachis-io.jpg" alt="miniature Inachis-Io">
      <div class="grand">
        <img src="300_inachis-io.jpg" alt="Inachis-io">
        <p>Un peu de texte sous l'image</p>
      </div>
    </li>
    <li>
      <img src="100_machaon.jpg" alt="miniature Machaon">
      <div class="grand">
        <img src="300_machaon.jpg" alt="Machaon" class="grand">
        <p>Ceci est la deuxième image</p>
      </div>
    </li>
    <li>
      <img src="100_polyommatus-icarus.jpg" alt="miniature Polyommatus-icarus">
      <div class="grand">
        <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-Icarus">
        <p>Magnifque espéce de Polyommatus-Icarus</p>
      </div>
    </li>
  </ul>
</div>
</body>
</html>

**carjo** · 23/01/2014, 22h15

J'ai forcé, mais sans doute de la mauvaise façon.(!)

Merci pour votre support.

:hover pour image et titre différent

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager