<style>   
/*--------------------------------------------------------------   
# Overlay   
--------------------------------------------------------------*/   
        .containerlay {   
        position: relative;   
        overflow: hidden;   
        }   
   
        .image-overlay {   
        display: flex;   
        width: 100%;   
        height: auto;  
        }   
   
        .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%);   
        }  
         
        .shadow { 
          box-shadow: 0px 0px 2px 0px rgba(50, 50, 50, 0.75); 
          transition: all 0.5s ease-in-out; 
        } 
   
        .containerlay:hover .overlay-tier {   
        top: 0;   
        opacity: 0.9;   
        }   
   
        .containerlay:hover .text-overlay {   
        /* margin-top: 30;  */  
        /* text-transform: uppercase; */  
        /*  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: 2%;   
        position: absolute;   
        top: 10%;   
        left: 50%;   
        -webkit-transform: translate(-50%, -50%);   
        -ms-transform: translate(-50%, -50%);   
        transform: translate(-50%, -50%);  
        transition: 0.5s ease;   
        text-transform: uppercase;  
        text-shadow: none !important;   
        }   
  
        .excerpt-overlay {  
          display: none;  
        }  
  
        .overlay-tier:hover .excerpt-overlay {  
          display: block;  
          overflow: hidden;   
          position: absolute;  
          top: 17%;  
        }  
 
      @media screen and (max-width: 768px) { 
 
        .containerlay:hover .overlay-tier {   
          top: 0;   
          opacity: 0.6;   
        }   
 
        .overlay-tier {   
          position: absolute;  
          top: 0%;  
          bottom: 0;   
          left: 0;   
          right: 0;   
          height: 100%;   
          width: 100%;   
          opacity: 0.6;   
          transition: none;   
          background: rgb(60, 171, 186);   
          background: linear-gradient(45deg, rgba(60, 171, 186, 1) 0%, rgba(4, 139, 154, 1) 100%);   
        }   
 
        .excerpt-overlay {  
          display: block;  
          top: 17%; 
          position: absolute; 
          margin-top: 10px; 
        }  
 
      } 
</style>  
 
 
      
  
    <!-- Blog version 2-->   
       
    <section class="section blog">   
    <div class="container">   
    <h2 class="title has-text-centered">Some of our awesome features</h2>   
      <div class="columns is-multiline">   
        <?php   
          $args = array(   
            'posts_per_page' => 4,   
          );   
          $recent = new WP_Query($args);   
          while($recent->have_posts()) : $recent->the_post();   
        ?>   
        <div class="column is-6-tablet is-3-desktop">   
          <article>   
              <div class="card">                  
                <div class="shadow containerlay">   
              <picture class="image-overlay">   
              <?php the_post_thumbnail(); ?>   
              </picture>   
                  <div class="overlay-tier">   
                    <div class="text-overlay">   
                      <h5 class="title is-6"> <?php the_title(); ?> </h5>  
                    </div>   
                    <div class="excerpt-overlay has-text-centered">  
                      <?php the_excerpt();?>   
                    </div>  
                  </div>   
                </div>   
              </div>  
          </article>   
        </div><!-- /column -->   
        <?php endwhile; ?>   
      </div><!-- /columns -->   
      <div class="buttons is-centered">   
          <a class="button is-primary" href="<?php the_permalink(111) ?>">Read more</a>     <!-- ID de "page des articles"-->   
      </div>   
    </div><!-- /container -->   
    </section>   
       
    <!-- /blog version 2-->