Discussion :

[jd_83]

Bonjour,

Je cherche à faire afficher sur des images des blocs textes lors du survol par le pointeur.

Code html :

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

1
2
3
4
5
6
7
8
9
10
<div class='info1'>
  <img src='https://i.imgur.com/1aCAUZA.jpg' style='width:250px;height:250px;'><div>
If you are just starting out you can test the waters by attempting the project-based HTML tutorial for beginners that I made just for you.<br>
Okay, you got me there, I made it because it was fun and I enjoy helping you on your learning journey as well.
  </div></div>
<div class='info1'>
  <img src='https://i.imgur.com/4lhitJi.jpg' style='width:250px;height:250px;'><div>
You can only upload images to codepen website servers if you have a Starter, Developer or Super pro account subscription. <br>This means you have to pay to store your images on Codepen.
You have a maximum file size limit on individual files that you can upload on Codepen.
  </div></div>

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
.info1{
	display: inline;
}
.info1:hover
{
  cursor:  pointer;
}
.info1 div{	
  display: none;
  position: absolute;
  top: 2px;
  padding:3px;
	width:250px;
	height: 250px;
	background-color: rgba(255, 255, 255, 0.75);
}
.info1:hover div
{
  display:block;
  cursor:  pointer;
  z-index:1000;
}

Le résultat sur codepen : https://codepen.io/jdp83/pen/xxRzgYo

Le problème est visible : le bloc s'affiche toujours sur la première image.

Merci de me donner une solution.

[Dave Hiock]

\ô/

Le problème est visible : le bloc s'affiche toujours sur la première image.

un simple

Code :

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

1
2
3
4
.info1{
  display: inline-block;
  position: relative;
}

devrait régler ton problème.

[jd_83]

Eh oui ! C'était simple, mais je pensais pas que le pb se situait dans le display du conteneur !

Merci beaucoup Dave !

[Dave Hiock]

N'hésite pas à mettre aussi le position: relative pour que tes éléments se positionnent par rapport à leur parent direct dans ton cas de figure.

[jd_83]

OK ; encore merci.