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