Texte dans images

bonjour je souhaiterai integrer un texte dans une image mais je ne sais pas comment faire et que ce texte ce vois que en roll-hover ci quelqu'un sais comment faire ?

<div id="imagesaut">
			<img src="images/saut.jpg" alt="saut" class="saut">
		</div>

Bonsoir. Vous souhaiteriez un effet tel que celui sur cette page (l'image avec la classe ".figure-captionslide") : Images, style guide.

Si oui voici la portion de code concernée : github

Olivier C a écrit :
Bonsoir. Vous souhaiteriez un effet tel que celui sur cette page (l'image avec la classe ".figure-captionslide") : Images, style guide.

Si oui voici la portion de code concernée : github

Comme le 600 sur la photo

Le "600" est valable pour toutes les photos de l'exemple. Ce point est hors sujet ici mais pour expliquer : il correspond à une résolution donnée en fonction de la définition de votre écran (resizez la fenêtre de votre navigateur pour voir) et de la qualité de votre connexion.

C'est le navigateur qui fait le choix de la source en fonction de ce qu'indique le html, en l’occurrence ici :

<figure class="figure-captionslide">
                          <picture>
                            <source media="(min-width: 2000px)" srcset="../Images/LotusTest.jpg 2500w" sizes="100vw">
                            <source media="(min-width: 1500px)" srcset="../Images/LotusTest2000.jpg 2000w" sizes="100vw">
                            <source media="(min-width: 1000px)" srcset="../Images/LotusTest1500.jpg 1500w" sizes="100vw">
                            <source media="(min-width: 800px)" srcset="../Images/LotusTest1000.jpg 1000w" sizes="100vw">
                            <source media="(min-width: 600px)" srcset="../Images/LotusTest800.jpg 800w" sizes="100vw">
                            <source media="(min-width: 400px)" srcset="../Images/LotusTest600.jpg 600w" sizes="100vw">
                            <source media="(min-width: 300px)" srcset="../Images/LotusTest400.jpg 400w" sizes="100vw">
                            <source srcset="../Images/LotusTest300.jpg 300w" sizes="100vw"><img src="../Images/LotusTest.jpg" alt="Image Test">
                          </picture>
                <figcaption>Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</figcaption>
              </figure>

Un CodePen : Picture tag, srcset and sizes attributes

Voir ici pour une explication sur l'élément picture : picture, MDN
Modifié par Olivier C (12 Mar 2020 - 23:21)

Enfaite je voudrait un texte sur une image comme sur la photo ci dessous