PHP

            
<section class="section blog">
    <div class="container">
    <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités</a></h2>         
      <?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="columns is-centered">
                <div class="column is-4 animate-translation-container">
                  <?php if (has_post_thumbnail() ) {?>
                    <picture class="animate-translation">
                      <?php the_post_thumbnail('thumbnail'); ?>
                    </picture>
                  <?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)];
                  ?>
                    <picture class="animate-translation">
                        <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                    </picture>
                  <?php } ?>                        
                </div>
                <div class="column is-5">
                <h5 class="title is-spaced is-5"><?php the_title(); ?></h5>
                    <p class="content"><?php the_excerpt();?></p>
                </div>
            </div>
        </div>
      <?php endwhile; ?>        
    </div>             
</section>
            
        

CSS

            
<style type="text/css">    

    .animate-translation-container{
        overflow: hidden;
        height: 50%;
    }

    .animate-translation img{
        -webkit-transition: all 2s ease-out;
        transition: all 2s ease-out;
        object-fit: cover;
    }   

    .animate-translation:hover img {
        -webkit-transform: translateX(130px);
        transform: translateX(130px);
        -webkit-transition: all 2s ease-out;
        transition: all 2s ease-out;
    }

</style>