HTML :

<div class="columns is-gapless borderop shadow">

      <div class="column is-4 background-color-black crea ">
        <a href="https://www.couture-poitiers.com/sur-mesure/">
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decotop.svg" alt=""></div>
          <h2 class="degrade is-size-5">
            sur-mesure
          </h2>
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decobot.svg" alt=""></div>
          <div class="opacit">
            <h3 class="is-size-3  color-white font">
              Création<br>de Vêtements</h3>
            <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/deco.svg" alt=""></div>
            <p class="obscur">
              Création de vêtement sur mesure. retouche en habillement : Robe de mariée, Robe de soirée.
 Bruno met en oeuvre tout son savoir faire et ses 30 ans d'expériences pour vous habiller.
            </p>
          </div>
        </a>
      </div>


      <div class="column is-4 background-color-black surmes ">
        <a href="https://www.couture-poitiers.com/decoration-dinterieur/">
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decotop.svg" alt=""></div>
          <h2 class="degrade is-size-5">
            Décoration d'intérieur
          </h2>
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decobot.svg" alt=""></div>
          <div class="opacit">
            <h3 class="is-size-3  color-white font">
              Création et Sur-mesure<br>en Ameublement</h3>
            <div class="deco"><img src="https://www.couture-poitiers.com
/wp-content/themes/couture/css/img/deco.svg" alt=""></div>
            <p class="obscur">
              Vente de tissu d'ameublement et conseil en décoration d'intérieur : 
rideaux, voilage, coussins... Véronique se déplace à domicile en emportant des tissus pour
 trouver la combinaison idéale et rendre harmonieux vos intérieurs
            </p>
          </div>
        </a>
      </div>
      <div class="column is-4 background-color-black brod ">
        <a href="https://www.couture-poitiers.com/broderie/">
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decotop.svg" alt=""></div>
          <h2 class="degrade is-size-5">
            Broderie
          </h2>
          <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/decobot.svg" alt=""></div>
          <div class="opacit">
            <h3 class="is-size-3  color-white font">
              Broderie<br>Industrielle</h3>
            <div class="deco"><img src="https://www.couture-poitiers.com/
wp-content/themes/couture/css/img/deco.svg" alt=""></div>
            <p class="obscur">
              Broderie industrielle pour les entreprises, association sportives,
 collectivités et particuliers., vente de textile de marquage. Quentin vous permettra de marquer durablement et qualitativement vos supports à l'unité ou en séries.
            </p>
          </div>
        </a>
      </div>

    </div>

---

CSS :

/*--------------------------------------------------------------
# PRESENTATION
--------------------------------------------------------------*/
.deco {
text-align: center;
width: 180px;
margin: 5px auto;
}

.degrade {
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.7) 30%,
rgba(255, 255, 255, 0.7) 70%,
transparent 100%);
text-align: center;
padding: 1px 0;
text-transform: uppercase;
color: var(--main-text-color);
margin: 0 20px;
}

.presentation {
margin: 50px auto 150px 0;
}

.presentation .box:not(:last-child) {
margin: 200px 0;
}

.pres {
background: #f6d7a8;
background-image: url(img/fond3.jpg);
background-position: right 0px top 40px;
background-size: auto auto;
padding: 300px 0 200px 0;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: auto auto;
}

.crea {
background: #d6cdbb;
background-image: url(img/creation-vetement-poitier.jpg);
}

.surmes {
background: #846955;
background-image: url(img/decoration-sur-mesure-ammeublement.jpg);
}

.brod {
background: #fff;
background-image: url(img/broderie.jpg);
}

.crea,
.brod,
.surmes {
color: var(--white);
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
transition: background 1s ease-in-out;
font-size: 0.8em;
}

.crea:hover,
.surmes:hover,
.brod:hover {
background-size: 130%;
background-position: center top;
}

.opacit {
background-color: var(--color-7);
border-top: solid 10px var(--color-8);
border-bottom: solid 10px var(--color-8);
padding: 20px;
text-align: center;
height: 200px;
margin: 30px 0;
}

.borderop {
border-top: solid 10px var(--color-8);
border-bottom: solid 10px var(--color-8);
}

.borderop2 {
border-bottom: solid 10px var(--color-8);
}