<!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles 
plus overlay gauche sur les miniatures avec un lien  --> 

    <style> 
    .boite {
      position: relative;
      width: 100%;
    }
    
    .image {
      display: block;
      width: 100%;
      height: 250px;
    }
    
    .volet-gauche {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      background-color: #00d1b2;
      overflow: hidden;
      width: 0;
      height: 100%;
      transition: .5s ease;
    }
    
    .boite:hover .volet-gauche {
      width: 100%;
    }
    
    .text {
      white-space: nowrap; 
      color: white;
      font-size: 20px;
      position: absolute;
      overflow: hidden;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
    }

    @media screen and (max-width: 768px){
      .volet-gauche {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: #00d1b2;
        overflow: visible;
        width: 100%;
        height: 100%;
        transition: .5s ease;
        opacity: 0.7;
      }
    }
    </style>

    <!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles 
plus overlay gauche sur les miniatures avec un lien  --> 
 
<div class="container is-fluid">  
  
        <?php  
        $last = get_categories();  
        foreach($last as $cat){  
        ?>  
  
  <section class="section blog">  
    <div class="container">  
    <div class="columns is-vcentered">  
      <div class="column">  
        <h2 class="title is-spaced"><?php echo $cat->name;//the_category() ?></h2>  
        <p class="subtitle"><?php echo $cat->category_description;//category_description();?></p>  
        <a href="<?php echo site_url().'/?cat='. $cat->term_id;?>">Voir !</a>  
      </div>  
      <div class="column">  
        <div class="columns is-multiline">  
  
        <?php  
          $args = array(  
            'posts_per_page' => 4,  
            'cat' => $cat->term_id,  
          );  
          $recent = new WP_Query($args);  
          while($recent->have_posts()) : $recent->the_post();  
        ?>  
  
          <div class="column is-6">  
            <div class="boite">  
              <picture class="image">  
              <?php the_post_thumbnail(); ?>  
              </picture>  
                  <div class="volet-gauche">  
                    <div class="text">  
                      <a class='button' href="<?php the_permalink() ?>">  
                      Read more</a>  
                    </div>  
                  </div>  
            </div>  
          </div>  
          <?php endwhile; ?>  
      </div>  
    </div>  
    </div>  
  </section>  
        <?php } ?>  
</div>