<!--------------------------------------- overlay 3/4 bottom -->  
   
 <style>  
 /*--------------------------------------------------------------  
 # Overlay  
 --------------------------------------------------------------*/  
         .containerlay {  
         position: relative;  
         overflow: hidden;  
         }  
   
         .image-overlay {  
         display: block;  
         width: 100%;  
         height: 250px;  
         }  
   
         .overlay-tier {  
         position: absolute;  
         top: 70%;  
         bottom: 0;  
         left: 0;  
         right: 0;  
         height: 100%;  
         width: 100%;  
         opacity: 0.7;  
         transition: 0.5s ease;  
         background: rgb(60, 171, 186);  
         background: linear-gradient(45deg, rgba(60, 171, 186, 1) 0%, rgba(4, 139, 154, 1) 100%);  
         }  
   
         .containerlay:hover .overlay-tier {  
         top: 0;  
         opacity: 0.9;  
         }  
   
         .containerlay:hover .text-overlay {  
         margin-top: 30%;  
         /*  position: absolute;  
         top: 50%;  
         left: 30%;  
         right: 30%;  
         -webkit-transform: translate(-50%, -50%);  
         -ms-transform: translate(-50%, -50%);  
         transform: translate(-50%, -50%);  
         text-align: center;  
         */  
         }  
   
         .text-overlay {  
         color: #fff;  
         margin-top: 6%;  
         /* position: absolute;  
         top: 10%;  
         left: 50%;  
         -webkit-transform: translate(-50%, -50%);  
         -ms-transform: translate(-50%, -50%);  
         transform: translate(-50%, -50%); */  
         text-align: center;  
         transition: 0.5s ease;  
         text-shadow: none !important;  
         }  
  
       @media screen and (max-width: 768px){ 
  
         .overlay-tier {  
           display: flex; 
           align-items: center; 
           justify-content: center; 
           position: absolute;  
           top: 0;  
           bottom: 0;  
           left: 0;  
           right: 0;  
           height: 100%;  
           width: 100%;  
           opacity: 0.7;  
           transition: 0.5s ease;  
           background: rgb(60, 171, 186);  
           background: linear-gradient(45deg, rgba(60, 171, 186, 1) 0%, rgba(4, 139, 154, 1) 100%); 
         } 
         .containerlay:hover .text-overlay {  
           display: none; 
         }   
         .containerlay:hover .overlay-tier {  
           display: none; 
         }  
       } 
 </style>  
   
   
 <!-- version 3 = boucle sur les catégories puis affiche les miniatures des 4 derniers articles  
 plus overlay 3/4 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="shadow containerlay">  
               <picture class="image-overlay">  
               <?php the_post_thumbnail(); ?>  
               </picture>  
                   <div class="overlay-tier">  
                     <div class="text-overlay">  
                       <a class='button' href="<?php the_permalink() ?>">  
                       Read more</a>  
                     </div>  
                   </div>  
             </div>  
           </div>  
           <?php endwhile; ?>  
       </div>  
     </div>  
     </div>  
   </section>  
         <?php } ?>  
 </div>