<!---------------------------------------- fade in box -->  
 
<style>  
 .boite {  
     position: relative;  
     width: 100%;  
 }  
   
 .img {  
     opacity: 1;  
     display: block;  
     width: 100%;  
     height: 250px;  
     transition: .5s ease;  
     backface-visibility: hidden;  
 }  
   
 .middle {  
     transition: .5s ease;  
     opacity: 0;  
     position: absolute;  
     top: 50%;  
     left: 50%;  
     transform: translate(-50%, -50%);  
     -ms-transform: translate(-50%, -50%)  
 }  
   
 .boite:hover .img {  
     opacity: 0.3;  
 }  
   
 .boite:hover .middle {  
     opacity: 1;  
 }  
   
 .text-fade {  
     background-color: #4CAF50;  
     color: white;  
     font-size: 16px;  
     padding: 16px 32px;  
     border-radius: 4px; 
 }  
 
 @media screen and (max-width: 768px){ 
 
   .middle {  
     transition: .5s ease;  
     opacity: 1;  
     position: absolute;  
     top: 50%;  
     left: 50%;  
     transform: translate(-50%, -50%);  
     -ms-transform: translate(-50%, -50%)  
   }  
 
   .img {  
     opacity: 1;  
     display: block;  
     width: 100%;  
     height: 250px;  
     transition: .5s ease;  
     backface-visibility: hidden;  
     opacity: 0.5; 
   }  
 } 
 
</style>  
 
 
 
<!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles  
plus fade in box 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="img">  
           <?php the_post_thumbnail(); ?>  
           </picture>  
               <div class="middle">  
                 <div class="text-fade">  
                   <a class='button' href="<?php the_permalink() ?>">  
                   Read more</a>  
                 </div>  
               </div>  
         </div>  
       </div>  
       <?php endwhile; ?>  
   </div>  
 </div>  
 </div>  
</section>  
     <?php } ?>  
</div>