Bonjour, je souhaite d'abord remercier toute personne qui donneras de son temps pour m'aider.

Je crée actuellement un petit site internet pour ma culture personnelle et je fait une galerie qui quand je passe la souris sur une image en fait apparaitre une autre qui donne plus d'information ( voir les screens du dessous si je ne suis pas clair )

Cependant en fonction des colonne les images s'affiche d'une mauvaise manière et j'ai beau tout essayer je ne trouve pas de solutions a ce probleme

PPour la premier collone tout s'affiche bien

Et voici le probleme (le cadre rouge est l'endroit ou je voudrais que l'image soit affiche 

Mon code HTML

<figure>
                        <img src="../premier-rendu/image/Classes/Êcaflip/pdp-eca.png" alt="Ecaflip">   
                        <div class="c4"> 
                            <img  src="../premier-rendu/image/Classes/Êcaflip/banniere_eca.jpg" alt="Cra"> 
                            <p>Les Crâs sont des archers aussi fiers que précis ! Ils font des alliés précieux contre les adeptes de la mêlée franche. Restant à distance, décochant leurs traits empennés dans le moindre orifice laissé sans surveillance, ils ne laissent aucun répit à leurs adversaires !</p>
                        </div>  
                        <figcaption>
                            <p>Ecaflip</p>
                        </figcaption>  
                    </figure>

Mon CSS

.galerie .c4{
    display: none;
    position: absolute;
}

.galerie figure:hover .c4{
    display: block;
}

.galerie .c4 img{
    width: 880px;
    margin-right: 56px;
}

.galerie .c4 p{
    z-index: 2;
    top: 20px;
    margin-right: 400px;
    margin-left: 20px;
    position: absolute;
}

-
Edité par Pom2Pain_ 9 décembre 2023 à 11:10:19

Bonjour,

merci d'éditer ton message pour mettre le code sous forme de texte, coloré à l'aide du bouton </> de la barre d'outils du forum. Des images de code ne nous aident pas à t'aider, on ne peut pas reproduire facilement le problème dans un coin.

Bonjour, j'imagine que vous n'avez pas de référent de positionnement pour déterminer à quel endroit ce positionne le point (0,0) de l'image qui apparait au survole.

Indiquer un position: relative; sur le parent ou l’ancêtre de l'image qui apparait au survol. Pour comprendre je vous recommande ces vidéos:

• https://grafikart.fr/tutoriels/positions-css-1040
• https://www.youtube.com/watch?v=O95RmLdRF_o

Ainsi que l'ancien cours toujours disponible en PDF, ou on vous explique par un exemple le positionnement d'une infobulle.

Bonjour merci beaucoup pour cette aide précieuse j'ai enfin réussi a déplacer les images il ne me reste plus qu'a trouver comment changer leur taille et m'attaquer au responsive design