Bonjour à tous,
Je m'arrache le peu de cheveux qui me restent, j'ai beau chercher, je ne trouve pas mon erreur.
Je désire faire un popup windows d'un texte sur une image.
En faisant un recouvrement de l'image par le texte.
Peu importe la couleur de fond que je mets à la <div> il est transparent au lieu d'être opaque !

voir codepen:
http://codepen.io/JefReb/pen/LWgJMm

Code css : 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
.conteneur {
	width:150px;
	margin: 150px auto;
}
img {
	position: relative;
	z-index:1;
	width: 140px;
	height: auto;
	overflow: hidden; 
}
.conteneur p {
	margin: 0;
	padding: 0;
	text-align: center;
}
.popup {
	display: none; 
	position: relative;
	z-index:999;
	top: -70px;
	left: 45px;
	width: 600px;
	height:150px; 
	padding: 20px
	background-color: #09F;
	border: 5px solid #ddd;
}
.popup p {
	margin: 2px;
}
.conteneur:hover .popup {
	display: block;
}
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
<div class="conteneur">
  <img src="http://www.photodenature.fr/wp-content/uploads/2015/01/photo-Dauphin.jpg" alt="">
      <p>Photo 1</p>
 
    <div class="popup"> 
      <h2>Le dauphin</h2>
      <p>Le substantif masculin « dauphin » (/do.'fɛ̃/) est issu, par l'intermédiaire d'un latin etc. </p>
	</div>
 
</div>
Quelqu'un a-t-il une idée pour que je puisse dormir tranquille!