PHP

            
<section>
    <div class="container">
    <h2 class="title is-1"><a href="<?php echo home_url(); ?>/actualites">Actualités 4</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="tri-shutter-div">
                      <?php if (has_post_thumbnail() ) {?>
                        <figure class="resp-height">
                          <?php the_post_thumbnail('thumbnail'); ?>
                            <figcaption>
                                <h3><?php the_title(); ?></h3>
                                <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="resp-height">
                            <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>
                                <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">

    /*
    1366*768 = budget laptops
    1536*864 = 1920*1080 laptops avec scaling à 125% (scaling par défaut dans windows)
    1920*1080 = standard desktop 
    */

    @media (min-device-height: 768px) and (max-device-height: 863px) and (orientation: landscape) {
        .resp-height{
          height: 20.25vh;
        }
    }

   /* @media (min-device-height: 864px) and (max-device-height: 899px) and (orientation: landscape) { */
    @media (min-width: 1536px) and (max-width: 1919px) and (orientation: landscape) {
        .resp-height{
          height: 22.1vh;
        }
    }

    @media (min-width: 1920px) and (orientation: landscape) {
        .resp-height{
          height: 17.1vh;
        }
    }
    
    .tri-shutter-div {
        font-family: 'Playfair Display', Arial, sans-serif;
        position: relative;
        overflow: hidden;
        height: 100%;
        width: 100%;
        color: #000000;
        text-align: right;
        font-size: 14px;
        background-color: #000000;
    }
    
    .tri-shutter-div * {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
    }
    
    .tri-shutter-div img {
        max-width: 100%;
        backface-visibility: hidden;
    }
    
    .tri-shutter-div figcaption {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 1;
        opacity: 1;
        padding: 30px 0 30px 10px;
        background-color: #ffffff;
        width: 40%;
        -webkit-transform: translateX(150%);
        transform: translateX(150%);
        opacity: 0;
    }
    
    .tri-shutter-div figcaption:before {
        position: absolute;
        top: 50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        right: 100%;
        content: ''
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 120px 120px 120px 0;
        border-color: transparent #ffffff transparent transparent;
    }
    
    .tri-shutter-div:after {
        position: absolute;
        bottom: 50%;
        right: 40%;
        content: ''
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 120px 120px 0 120px;
        border-color: rgba(255, 255, 255, 0.5) transparent transparent transparent;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
        -webkit-transition: all 0.35s ease;
        transition: all 0.35s ease;
        opacity: 0;
    }
    
    .tri-shutter-div h3,
    .tri-shutter-div p {
        line-height: 1.5em;
        -webkit-transform: translateX(-30px);
        transform: translateX(-30px);
        margin: 0;
    }
    
    .tri-shutter-div h3 {
        margin: 0 0 5px;
        line-height: 1.1em;
        font-weight: 900;
        font-size: 1.4em;
        opacity: 0.75;
    }
    
    .tri-shutter-div p {
        font-size: 0.8em;
    }
    
    .tri-shutter-div a {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }
    
    .tri-shutter-div:hover img,
    .tri-shutter-div.hover img {
        zoom: 1;
        filter: alpha(opacity=50);
        -webkit-opacity: 0.5;
        opacity: 0.5;
    }
    
    .tri-shutter-div:hover:after,

    .tri-shutter-div:hover figcaption{
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1;
    }
    
</style>