18041 sujets

Questions générales et questions de débutants

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)
Modérateur
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
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
Prévenir un modérateur
Répondre au sujet
Aller à