<!-- ---------------------------------overlay droit --> 
 
<style> 
        .boite { 
          position: relative; 
          width: 100%; 
        } 
         
        .image { 
          display: block; 
          width: 100%; 
           height: 250px; 
        } 
         
        .volet-droit { 
          position: absolute; 
          bottom: 0; 
          left: 100%; 
          right: 0; 
          background-color: #008CBA; 
          overflow: hidden; 
          width: 0; 
          height: 100%; 
          transition: .5s ease; 
        } 
         
        .boite:hover .volet-droit { 
          width: 100%; 
          left: 0; 
        } 
         
        .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-droit {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #008CBA;
            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 droit 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-droit"> 
                    <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>