Box 2

HTML :

 

<!--activités-->
<section class="hero is-medium activites background-color-black">
  <div class="hero-head">
    <h2 class="title is-2 has-text-centered color-white"><a href="#">Nos prestations</a></h2>
  </div>
  <div class="hero-body">
    <div class="columns is-vcentered is-multiline">
      <div class="liste-activites column is-3 is-offset-1">
      <img class="image-activite image-fond" src="<?php echo get_template_directory_uri();
 ?>/css/img/prestation4.jpg" alt="Prestation 4">
          <ul>
            <li>
              <a class="is-size-5 is-uppercase color-white" href="#">Prestation 1</a>
              <img class="image-activite" src="<?php echo get_template_directory_uri(); 
?>/css/img/prestation1.jpg" alt="Prestation 1">
              <div class="detail-activite column is-8 color-white">
                <h3 class="title is-6 is-uppercase color-white">Prestation 1</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis 
debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum
 beatae porro natus fugiat. Voluptatem.</p>
              </div>
            </li>
            <li>
              <a class="is-size-5 is-uppercase color-white" href="#">Prestation 2</a>
              <img class="image-activite" src="<?php echo get_template_directory_uri();
 ?>/css/img/prestation2.jpg" alt="Prestation 2">
              <div class="detail-activite column is-8 color-white">
                <h3 class="title is-6 is-uppercase color-white">Prestation 2</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis 
debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum
 beatae porro natus fugiat. Voluptatem.</p>
              </div>
            </li>
            <li>
              <a class="is-size-5 is-uppercase color-white" href="#">Prestation 3</a>
              <img class="image-activite" src="<?php echo get_template_directory_uri();
 ?>/css/img/prestation3.jpg" alt="Prestation 3">
              <div class="detail-activite column is-8 color-white">
                <h3 class="title is-6 is-uppercase color-white">Prestation 3</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis debitis 
dolorum repellat inventore corporis facere deserunt expedita, nam officia nostrum beatae porro
 natus fugiat. Voluptatem.</p>
              </div>
            </li>
            <li>
              <a class="is-size-5 is-uppercase color-white" href="#">Prestation 4</a>
              <img class="image-activite" src="<?php echo get_template_directory_uri(); 
?>/css/img/prestation4.jpg" alt="Prestation 4">
              <div class="detail-activite column is-8 color-white">
                <h3 class="title is-6 is-uppercase color-white">Prestation 4</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis 
debitis dolorum repellat inventore corporis facere deserunt expedita, nam officia 
nostrum beatae porro natus fugiat. Voluptatem.</p>
              </div>

            </li>
          </ul>
      </div>
      <div class="affichage-detail-activite column is-8"></div>
    </div>
  </div>
</section>
<!--/activités-->

---

CSS :

/*--------------------------------------------------------------
# ACTIVITES
--------------------------------------------------------------*/
/* SLIDES AVEC HOVER EFFECT */

.activites{
  padding: 3rem 0rem;
}
.hero.is-medium.activites .hero-body{
  padding-bottom: 15rem;
  padding-top: 3rem;
}
.activites .image-fond{
  display: none;
}
.activites li a{
  text-align: center;
  display: block;
  margin: 1rem 0;
}
.activites li h3{
  display: none;
}
@media screen and (min-width: 769px){
  .activites .liste-activites{
    position: relative;
    padding: 0;
  }
  .activites .affichage-detail-activite{
    order: -1;
  }
  .activites li a{
    display: block;
    padding: 0.5rem;
    transition: all 0.3s ease-in-out;
    position: relative;
    z-index: 10;
    text-align: left;
  }
  .activites li a:hover{
    background-color: var(--white);
    color: var(--black);
  }
  .activites .detail-activite{
    transform: translateX(100%);
    background-color: rgba(0,0,0,.5);
    position: absolute;
    width: 500px;
    height: 400px;
    top: 0;
    opacity: 0;
    transition: transform 1s ease-in-out 0.1s, opacity 1s ease-in-out 0.6s;
  }
  .activites li h3{
    display: block;
  }
  .activites .image-activite{
    position: absolute;
    top: 0;
    transform: translateX(-105%);
    width: auto;
    height: 400px;
    max-width: unset;
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
  }
  .activites .image-fond{
    opacity: 1;
    display: inline;
  }
  .activites li:hover .detail-activite{
    opacity: 1;
    transform: translateX(-116%);
  }
  .activites li:hover .image-activite{
    opacity: 1;
  }
  .activites li:hover .image-fond{
    opacity: 0;
  }
}