<!--------------------------------------- fade in overlay --> 
 
 
<style> 
.boite { 
  position: relative; 
  width: 100%; 
} 
 
.img-fade { 
  display: block; 
  width: 100%; 
   height: 250px; 
} 
 
.volet-fade { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0; 
  height: 100%; 
  width: 100%; 
  opacity: 0; 
  transition: .5s ease; 
  background-color: #008CBA; 
} 
 
.boite:hover .volet-fade { 
  opacity: 1; 
} 
 
.text-fadeIn { 
  color: white; 
  font-size: 20px; 
  position: absolute; 
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%); 
  -ms-transform: translate(-50%, -50%); 
} 

@media screen and (max-width: 768px){
  .volet-fade {
    position: absolute;
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    height: 100%; 
    width: 100%; 
    opacity: 0.6; 
    transition: .5s ease; 
    background-color: #008CBA; 
  }
}
</style> 
 
 
 
<!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles 
plus fade in overlay 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 img-fade"> 
              <?php the_post_thumbnail(); ?> 
                  <div class="volet-fade"> 
                    <div class="text-fadeIn"> 
                      <a class='button' href="<?php the_permalink() ?>"> 
                      Read more</a> 
                    </div> 
                  </div> 
            </div> 
          </div> 
          <?php endwhile; ?> 
      </div> 
    </div> 
    </div> 
  </section> 
        <?php } ?> 
</div>