Category Archive Grid Showing Featured Images with Post Title on Hover in Genesis. https://sridharkatakam.com/category-archive-grid-showing-featured-images-with-post-title-on-hover-in-genesis/

category.php

<?php

// Force full width content
// add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Load JS that sets equal heights for Posts on non-touchscreen devices
add_action( 'wp_enqueue_scripts', 'sk_enqueue_category_script' );
function sk_enqueue_category_script() {
	if ( wp_is_mobile() ) {
		return;
	}
	wp_enqueue_script( 'set-heights', get_stylesheet_directory_uri() .'/js/set-heights.js' , array( 'jquery' ), '1.0.0', true );
}

/**
 * Display as Columns
 *
 */
function be_portfolio_post_class( $classes ) {

	if ( is_main_query() ) { // conditional to ensure that column classes do not apply to Featured widgets
		$columns = 3; // Set the number of columns here

		$column_classes = array( '', '', 'one-half', 'one-third', 'one-fourth', 'one-fifth', 'one-sixth' );
		$classes[] = $column_classes[$columns];
		global $wp_query;
		if( 0 == $wp_query->current_post || 0 == $wp_query->current_post % $columns )
			$classes[] = 'first';
	}

	return $classes;
}
add_filter( 'post_class', 'be_portfolio_post_class' );

// Remove post info
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );

// Remove the post image
remove_action( 'genesis_entry_content', 'genesis_do_post_image', 8 );

// Display featured image above title
add_action ( 'genesis_entry_header', 'sk_show_featured_image', 7 );
function sk_show_featured_image() {
	if ( $image = genesis_get_image( 'format=url&size=category-thumbnail' ) ) {
		printf( '<div class="category-thumbnail"><a href="%s" rel="bookmark"><img src="%s" alt="%s" /></a></div>', get_permalink(), $image, the_title_attribute( 'echo=0' ) );
	}
}

// Remove the post content
remove_action( 'genesis_entry_content', 'genesis_do_post_content' );

// Remove entry meta from entry footer incl. markup
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_open', 5 );
remove_action( 'genesis_entry_footer', 'genesis_entry_footer_markup_close', 15 );
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

// Remove the entry title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );

// Add entry title in .entry-content
add_action( 'genesis_entry_content', 'genesis_do_post_title' );

// Remove post content navigation (for multi-page posts)
remove_action( 'genesis_entry_content', 'genesis_do_post_content_nav', 12 );

genesis();

functions.php

// Register new image size for featured images on category archives
add_image_size( 'category-thumbnail', 450, 450, true );

set-heights.js

jQuery(function( $ ){

	function setHeights() {
		$('.category .content .entry').each(function() {
			var $imgh = $('.category-thumbnail img').height();
			$(this).css('min-height', $imgh);
		});
	}
	$(window).on('resize load', setHeights);

});

style.css

/* Category Archive Grid Showing Featured Images with Post Title on Hover
------------------------------------------------------------------------- */

.category .content .entry {
	padding: 0;
	/*background: #333;*/ /* for dark overlay */
	position: relative;
	margin-bottom: 20px;
}

.category-thumbnail img {
	position: absolute;
	left: 0;
	top: 0;
	/*transition: all 0.1s ease-in-out 0s;*/ /* For faster hover effect */
	transition: all .2s linear;
	z-index: 1;
}

.category-thumbnail img:hover {
	opacity: 0.1;
}

.category .content .entry .entry-content {
	text-align: center;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.category .content .entry .entry-title {
	margin-bottom: 0;
	font-size: 22px;
}

/* for dark overlay */
/*.category .content .entry .entry-title a {
	color: #fff;
}*/

@media only screen and (max-width: 1024px) {

	.category-thumbnail img {
		position: static;
	}

	.category .content .entry .entry-content {
		position: static;
		text-align: left;
		padding: 20px;
		-webkit-transform: none;
		-moz-transform: none;
		-ms-transform: none;
		-o-transform: none;
		transform: none;
	}

}

@media only screen and (max-width: 800px) {

	.category .content .entry.one-third {
		width: 31.6239%;
		margin-left: 2.5641%;
	}

	.category .content .entry.one-third.first {
		margin-left: 0;
	}

	.category .content .entry .entry-content {
		padding: 10px 0;
	}

}

@media only screen and (max-width: 500px) {

	.category .content .entry {
		margin-bottom: 40px;
	}

	.category .content .entry.one-third {
		width: 100%;
		margin-left: 0;
	}

}