Lien d’origine: https://codepen.io/brunobeneducci/pen/ZaRmVQ
HTML wordpress :
<section class="section blog">
<div class="container">
<h2 class="title is-1"><span class="is-size-2 is-uppercase"><a href="<?= get_category_link(1) ?>">Actualités</a></span></h2>
<div class="columns">
<?php
$args = array(
'posts_per_page' => 3,
'ignore_sticky_posts' => 1,
'category__in' => 1,
);
$recent = new WP_Query($args);
while($recent->have_posts()) : $recent->the_post();
?>
<div class="column is-4">
<div class="fx3">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<a href="<?php the_permalink() ?>" title="<?php the_title(); ?>">
<div class="item effet1">
<figure class="image">
<?php if (has_post_thumbnail() ) {
the_post_thumbnail('thumbnail');
} else {
$curdir=getcwd(); chdir(get_template_directory() . "/css/img/random/");
$files=glob("*.{gif,png,jpg,gif}", GLOB_BRACE);
chdir($curdir);
$file=$files[array_rand($files)];
?>
<img class="transition1" src="<?php echo(get_bloginfo('template_url')."/css/img/random/$file"); ?>" alt="<?php bloginfo( 'name' ); ?>" />
<?php } ?>
<div class="content">
<h4 class="subtitle is-3"><?php the_title(); ?></h4>
<p class="content"><?php the_excerpt();?></p>
</div>
</figure>
</div>
</a>
</article>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</section>
CSS :
.effet1 {
width: 100%;
position: relative;
background-color: black;
}
.transition1 {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.fx3 .item img {
display: block;
max-width: 100%;
height: auto;
outline: transparent solid 2px;
outline-offset: 0px;
}
.fx3 a:hover .item img,
.fx3 a:focus .item img {
opacity: 0.5;
outline: #fff solid 2px;
outline-offset: -10px;
}
.fx3 h4,
.fx3 p {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
/* padding: 0.7em; */
}
.fx3 a .item h4 {
font-family: "Raleway", sans-serif;
font-size: 24px;
position: absolute;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
top: 42%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
opacity: 0;
}
.fx3 a:hover .item h4,
.fx3 a:focus .item h4 {
opacity: 1;
}
.fx3 a .item p {
font-family: "Raleway", sans-serif;
font-size: 14px;
position: absolute;
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
position: absolute;
top: 52%;
left: 0;
right: 0;
margin: 0 auto;
text-align: center;
opacity: 0;
}
.fx3 a:hover .item p,
.fx3 a:focus .item p {
opacity: 1;
}