Grid Blog with Overlay
<?php
/**
* Template Name: GridBlog Page
* Description: Used as a page template to show page contents, followed by a loop
* through the "Blog" category
**/
// This gives the page a full width layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
// Add our custom loop
add_action( 'genesis_loop', 'tartuffe_pup_loop' );//change name here
//change name as above
function tartuffe_pup_loop() {
$args = array(
'category_name' => 'pup', // replace with your category slug
'orderby' => 'post_date',
'order' => 'DESC',
'posts_per_page'=> '18', // overrides posts per page in theme settings
);
$loop = new WP_Query( $args );
if( $loop->have_posts() ) {
// loop through posts
while( $loop->have_posts() ): $loop->the_post();
echo '<div class="blog-content">';
echo '<a class="rig-cell" href="' . get_permalink() . '">';
echo '<img class="rig-img" src=" ' . the_post_thumbnail() . '">';
echo '<span class="rig-overlay"></span>';
echo '<span class="rig-text">' . get_the_title() . '</span>';
echo ' </a></div>'; // The end of blog-cont
endwhile;
}
wp_reset_postdata();
}
genesis();/*BLOG GRID---------------------------------------------------------------------------------------------------- */
.blog-content {
display: inline-block;
*display: inline;
/*for IE6 - IE7*/
width: 33%;
vertical-align: middle;
box-sizing: border-box;
margin: 0px auto -12px;
padding: 0;
}
/* The wrapper for each item */
.rig-cell {
/*margin:12px;
box-shadow:0 0 6px rgba(0,0,0,0.3);*/
display: block;
position: relative;
overflow: hidden;
}
/* If have the image layer */
.rig-img {
display: block;
width: 100%;
height: auto;
border: none;
transform: scale(1);
transition: all 1s;
}
.blog-content:hover .rig-img {
transform: scale(1.05);
}
/* If have the overlay layer */
.rig-overlay {
position: absolute;
display: block;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
background: #515952 url(http://geckografix.guru/wp-content/uploads/2017/05/link.png) no-repeat center 20%;
background-size: 50px 50px;
opacity: 0;
filter: alpha(opacity=0);
/*For IE6 - IE8*/
transition: all 0.6s;
}
.blog-content:hover .rig-overlay {
opacity: 0.8;
}
/* If have captions */
.rig-text {
display: block;
padding: 0 30px;
box-sizing: border-box;
position: absolute;
left: 0;
width: 100%;
text-align: center;
text-transform: capitalize;
font-size: 18px;
font-weight: bold;
font-family: 'Oswald', sans-serif;
font-weight: normal!important;
top: 40%;
color: white;
opacity: 0;
filter: alpha(opacity=0);
/*For older IE*/
transform: translateY(-20px);
transition: all .3s;
}
.blog-content:hover .rig-text {
transform: translateY(0px);
opacity: 0.9;
}
@media (max-width: 900px) {
.blog-content {
width: 50%;
}
}
@media (max-width: 650px) {
.blog-content {
width: 100%;
}
}