Texte sur image

Bonjour à tous, quelqu'un saurait me dire comment faire pour que mon h2 soit sur chaque image.merci

voici mon code html:

<div class="container text-center">
            <div class="row">
                <div class="col">
                  <img src="images/coldelaloze.JPG" alt="image-équipe">
                  <h2>L'équipe</h2>
                </div>
                <div class="col">
                  <img src="images/contrelamontre.jpg" alt="image-événements">
                  <h2>Les événements</h2>
                </div>
                <div class="col">
                  <img src="images/relaisduchat.JPG" alt="image-galerie-photos">
                  <h2>Galerie Photos</h2>
                </div>
              </div>
            </div>

Modifié par _laurent (23 Feb 2023 - 15:42)

Salut,

Pour moi la meilleure solution serait de mettre ton image en background des titres :

<h2 class="titre-bg-1">L'équipe</h2>

.titre-bg-1 {
    background-image: url(path/vers/images/coldelaloze.JPG.);
}

Sinon placer soit les h2 sur les image ou les image sous les h2 avec la position absolute.

Bonne aprem

Je vais essayer, merci pour ta solution

j'ai essayer ta première solution, mais les h2 restent toujours sous les images

Salut,

a priori elle marche bien sa première solution : https://jsfiddle.net/w63zr512/

bonjour Mathieuu,

ok, comme je débute, je n'y étais pas arrivé, merci pour ton exemple.
Finalement j'ai fait comme ça pour arriver au résultat.

<div class="container">
<div class="cont-item">
<img class="cont-item-img" src="images/coldelaloze.JPG" alt="image-équipe">
<h2>L'équipe</h2>
</div>

<div class="cont-item">
<img class="cont-item-img" src="images/contrelamontre.jpg" alt="image-événements">
<h2>Les événements</h2>
</div>

<div class="cont-item">
<img class="cont-item-img" src="images/relaisduchat.JPG" alt="image-galerie-photos">
<h2>Galerie Photos</h2>
</div>
</div>
</div>

.container {
margin-top: 30px;
display: flex;
justify-content: space-around;
}

.cont-item {
position: relative;
}

.cont-item-img {
opacity: 0.8;
}

h2 {
position: absolute;
bottom: 20px;
margin-left: 40px;
font-weight: 600;
color: #FC0404;
-webkit-text-stroke: 1px #050404;
z-index: 5