PHP

            
<section>
    <div class="container">
    <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités 6</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="quadri-line">
                      <?php if (has_post_thumbnail() ) {?>
                        <figure class="">
                          <?php the_post_thumbnail('thumbnail'); ?>
                            <div class="title-2">
                                <div class="test-4">
                                    <h4><?php the_title(); ?></h4>
                                </div>
                            </div>
                            <figcaption>
                                <p><?php the_excerpt(); ?></p>
                            </figcaption>
                            <a class="" 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>
                            <div class="title-2">
                                <div class="test-4">
                                    <h4><?php the_title(); ?></h4>
                                </div>
                            </div>                                   
                            <figcaption>
                                <p><?php the_excerpt(); ?></p>
                            </figcaption>
                            <a class="" href="<?php the_permalink(); ?>"></a>
                        </figure>
                      <?php } ?>
                    </div>
                </div>
            </div>
          <?php endwhile; ?>
        </div>
    </div>
</section>
            
        

CSS

            
<style type="text/css">

    .test-4{
        padding-top: 0.5vh;
    }
    
    .quadri-line {
        position: relative;
        overflow: hidden;
        margin: 10px;
        min-width: 230px;
        max-width: 315px;
        width: 100%;
        color: #ffffff;
        text-align: center;
        font-size: 16px;
        background-color: #000000;
    }

    .quadri-line *,
    .quadri-line *:before,
    .quadri-line *:after {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.55s ease;
        transition: all 0.55s ease;
    }

    .quadri-line img {
        max-width: 100%;
        backface-visibility: hidden;
        vertical-align: top;
    }

    .quadri-line .title-2 {
        position: absolute;
        top: 58%;
        left: 25px;
        padding: 5px 10px 10px;
    }

    .quadri-line .title-2:before,
    .quadri-line .title-2:after {
        height: 2px;
        width: 400px;
        position: absolute;
        content: ''
        background-color: #ffffff;
    }

    .quadri-line .title-2:before {
        top: 0;
        left: 10px;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }

    .quadri-line .title-2:after {
        bottom: 0;
        right: 10px;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
    }

    .quadri-line .title-2 div:before,
    .quadri-line .title-2 div:after {
        width: 2px;
        height: 300px;
        position: absolute;
        content: ''
        background-color: #ffffff;
    }

    .quadri-line .title-2 div:before {
        top: 10px;
        right: 0;
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    .quadri-line .title-2 div:after {
        bottom: 10px;
        left: 0;
        -webkit-transform: translateY(-100%);
        transform: translateY(-100%);
    }

    
    .quadri-line h4 {
        margin: 0;
        text-transform: uppercase;
        padding-top: 2vh;
    }

    
    .quadri-line h4 {
        display: block;
        font-weight: 700;
        background-color: #ffffff;
        padding: 5px 10px;
        color: #000000;
        opacity: 0;
    }

    .quadri-line figcaption {
        position: absolute;
        bottom: 42%;
        left: 25px;
        text-align: left;
        opacity: 0;
        padding: 5px 60px 5px 10px;
        font-size: 0.8em;
        font-weight: 500;
        letter-spacing: 1.5px;
    }

    .quadri-line  p {
        margin: 0;
    }

    .quadri-line a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
    }

    .quadri-line:hover img{
        zoom: 1;
        filter: alpha(opacity=25);
        -webkit-opacity: 0.25;
        opacity: 0.25;
    }

    .quadri-line:hover .title-2:before,
    .quadri-line:hover .title-2:after,
    .quadri-line:hover .title-2 div:before,
    .quadri-line:hover .title-2 div:after{
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0);
    }

    .quadri-line:hover .title-2:before,
    .quadri-line:hover .title-2:after{
        -webkit-transition-delay: 0.15s;
        transition-delay: 0.15s;
    }

    .quadri-line:hover h4{
        opacity: 1;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

    .quadri-line:hover figcaption{
        opacity: 1;
        -webkit-transition-delay: 0.2s;
        transition-delay: 0.2s;
    }

</style>