GeckoGrafix
6/17/2017 - 1:43 PM

Grid Blog with Overlay

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%;
    }
}