bonjour,

Je ne sais pas si je suis dans la bonne catégorie ou si il faut que je fasse du javascript.

J'ai plusieurs images et au survol de chaque image , je veux renseigner le nom de l'image dans un label.

Comment dois je faire faire ?

Merci 

Oui tu n'es pas dans la bonne catégorie à mon avis. tu auras besoin du javascript pour sa. Par contre si toute tes images possède leur propre label ( ce que je te déconseille car c'est une balise faite pour les formulaires, utilise plutôt un <p> par exemple) alors joue avec les sélecteur dans ton code CSS. Dans ce cas tu devras remplir chaque paragraphe avec le nom de l'image lors du chargement de ta page. lors du chargement, tes paragraphe doivent être cachés et une fois l'image survolé, tu affiche le paragraphe.

un petit exemple

Code HTML

<img />
<p>nom de l'image</p>

Code CSS

img + p {
   display: none;
}

img:hover + p {
   display: block;
}

J'ai utilisé display mais libre à toi d'utiliser visibility ou display. En fait c'est toi l’architecte.

-
Edité par Duckerson 21 janvier 2019 à 12:10:04

Duckerson :   celà me semble bon également

Salut,

allons plus loin avec le code proposé par Dukerson

Plutôt qu'un <p> on peut utiliser les balises qui vont bien avec les images, figure et figcaption.
Et pour l’accessibilité aux personnes avec un handicap visuels on peut utiliser autre chose que display:none ou hidden.

https://jsfiddle.net/Site_Frogweb/qru21cjL/

-
Edité par Frogweb 23 janvier 2019 à 14:05:02

J'aime ta propos Frogweb. A cela j'ai un peu modifier ton style.

body{
    margin:0;
}
figure {
    width:300px;
    height:150px;
    position: relative;
}
figcaption {
    height:0;
    overflow:hidden;
    text-align: center;
    font-family:arial;
    background:#333;
    color:#fff;
    position: absolute;
    top: 0;
    width: 100%;
}
figure img {
    width:100%;
    height:100vh;
    vertical-align: top;
}
figure:hover figcaption {
    height:auto;
    padding:10px 0
}

Zoki_Marciano a écrit:

width; 100% c'est le mal...

C'est exact dans la plupart des cas mais pas sur une image bien que ma préférence aille à max-width:100%
Par contre oui, sur le figcaption il n'a rien à y faire. Puisque le figcaption est positionné, il faut plutôt mettre left et right à 0.

D'autres cas pour lesquels width:100% n'est pas le mal : <table>, display:table.

-
Edité par Frogweb 24 janvier 2019 à 11:42:55