PHP

            
<section>
    <div class="container">
        <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités 3</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="shutter-div">
                      <?php if (has_post_thumbnail() ) {?>
                        <figure class="">
                              <?php the_post_thumbnail('thumbnail'); ?>
                            <figcaption>
                                <h3><?php the_title(); ?></h3>
                            </figcaption>
                            <a href="<?php the_permalink(); ?>"></a>                
                        </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="">
                            <div class="">
                                <img src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
                            </div>
                            <figcaption>
                                <h3><?php the_title(); ?></h3>
                            </figcaption>
                            <a class=" " href="<?php the_permalink(); ?>"></a>
                        </figure>
                      <?php } ?>                          
                    </div>   
                </div>
            </div>
          <?php endwhile; ?>
        </div>
    </div>
</section>
            
        

CSS

            
<style type="text/css">

    .shutter-div {
        background-color: #000;
        display: inline-block;
        font-size: 16px;
        margin: 10px;
        max-width: 315px;
        min-width: 230px;
        overflow: hidden;
        position: relative;
        text-align: center;
        width: 100%;
    }
          
    .shutter-div * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }
          
    .shutter-div:before,
    .shutter-div:after {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        background-color: #000000;
        border-left: 3px solid #fff;
        border-right: 3px solid #fff;
        content: ''
        opacity: 0.9;
        z-index: 1;
    }
          
    .shutter-div:before {
        -webkit-transform: skew(45deg) translateX(-155%);
        transform: skew(45deg) translateX(-155%);
    }
          
    .shutter-div:after {
        -webkit-transform: skew(45deg) translateX(155%);
        transform: skew(45deg) translateX(155%);
    }
          
    .shutter-div img {
        backface-visibility: hidden;
        max-width: 100%;
        vertical-align: top;
    }
          
    .shutter-div figcaption {
        top: 50%;
        left: 50%;
        position: absolute;
        z-index: 2;
        -webkit-transform: translate(-50%, -50%) scale(0.5);
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
        -webkit-box-shadow: 0 0 10px #000000;
        box-shadow: 0 0 10px #000000;
    }
          
    .shutter-div h3 {
        background-color: #000000;
        border: 2px solid #fff;
        color: #fff;
        font-size: 1em;
        font-weight: 600;
        letter-spacing: 1px;
        margin: 0;
        padding: 5px 10px;
        text-transform: uppercase;
    }
            
    .shutter-div a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 3;
    }
            
    .shutter-div:hover > img{
        opacity: 0.5;
    }
            
    .shutter-div:hover:before{
        -webkit-transform: skew(45deg) translateX(-55%);
        transform: skew(45deg) translateX(-55%);
    }
            
    .shutter-div:hover:after{
        -webkit-transform: skew(45deg) translateX(55%);
        transform: skew(45deg) translateX(55%);
    }
            
    .shutter-div:hover figcaption{
        -webkit-transform: translate(-50%, -50%) scale(1);
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }

</style>