PHP

            
<section class="section blog">
    <div class="container">
        <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités 2</a></h2>
        <div class="columns">
          <?php
              $args = array(
                  'posts_per_page' => 3,
              );
              $recent = new WP_Query($args);
              while($recent->have_posts()) : $recent->the_post();
          ?>
            <div class="container is-fluid">
                <div class=" is-centered is-multiline">
                    <div class="button-overlay-reference">
                      <?php if (has_post_thumbnail() ) {?>
                        <figure class="">
                            <picture class="image-actu">
                                <div class="img-container">
                                  <?php the_post_thumbnail('thumbnail'); ?>
                                </div>
                            </picture>
                            <div>
                                <div>
                                    <h4 class="has-text-centered is-size-5"><?php the_title(); ?></h4 class="has-text-centered is-size-5">
                                </div>
                            </div>
                            <div class="buttons">
                                <a class=" button-overlay" href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a>
                            </div>            
                        </figure>
                      <?php } else { ?>
                      <?php
                          $curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
                          $files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
                          chdir($curdir);
                          $file=$files[array_rand($files)];
                      ?>
                        <figure class="image-actu">
                            <div class="img-container">
                                <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                            </div>
                            <div>
                                <div>
                                    <h4 class="has-text-centered is-size-5"><?php the_title(); ?></h4 class="has-text-centered is-size-5">
                                </div>
                            </div>
                            <div class="buttons">
                                <a class=" button-overlay" href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a>
                            </div>
                        </figure>
                      <?php } ?>             
                    </div>
                </div>
            </div>
          <?php endwhile; ?>   
        </div>             
    </div>
</section>
            
        

CSS

            
<style type="text/css">

    .button-overlay-reference{
        position: relative;
    }
      
    .button-overlay{
        position: absolute;
        top: 50%;    
        left: 50%; 
        transform: translate(-50%, -50%);
        opacity: 0;
        width: 75%;
        margin-top: -5%;
    }
      
    .button-overlay-reference:hover .button-overlay{
        opacity: 1;
        transition: opacity 0.5s;
    }
      
    .button-overlay-reference:hover .image-actu img{
        opacity: 0;
        transition: opacity 0.5s;
    }
      
    .button-overlay-reference:hover .img-container{
        border: solid 3px black;
        transition: 0.25s;
    }
      
</style>