Making Category Archive Page in Gallery Format

Step 1: Add this following code in your functions.php file :

Step 2: Create a new js file “hover.js” and put in “your-child-theme-folder/js” folder. Now add this scripts into this file:

jQuery(document).ready(function($){
  $(".col-3").hover(function(){
    $(this).find('.entry-header').fadeIn();
  },function(){
    $(this).find('.entry-header').fadeOut();
  });
});

Step 3: Loading this new JS file on your site using wp_enqueue_scripts function. Add the following php code in your functions.php file. This JS file will load on category archive page only.

//* Loading JS file on Category Archive page only
add_action( 'wp_enqueue_scripts', 'gd_hover_effect' );
function gd_hover_effect() {
   if( ! is_category() )
     return;
   
   wp_enqueue_style( 'hover-js', get_stylesheet_directory_uri() . '/js/hover.js', array(), CHILD_THEME_VERSION );
}

Step 4: Last step is styling. Open your style.css file and add the following CSS :

.category .col-3 {
  float: left;
	margin: 0 0 0.5% 1.5%;
	overflow: hidden;
  position: relative;
	text-align: center;
	width: 32.333333333%;
}

.category .col-3:nth-of-type(3n+1) {
  clear: both;
  margin-left: 0;
}

.category .entry > a {
  display: inline-block;
  line-height: 0;
}

.category .entry-header {
  background: rgba(255,255,255,0.75);
  display: block;
  height: 100%;
  padding: 15px;
  position: absolute;
  top: 0;
  width: 100%;
}

.category .entry-header .entry-title {
  font-size: 14px;
  line-height: 1.4;
  text-transform: uppercase;
}

.category p.entry-meta {
  color: #222;
  margin: 60px auto 5px;
}

@media only screen and (max-width: 680px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    clear: none;
    margin-left: 1.5%;
    width: 49.25%;
  }
  
  .category .col-3:nth-of-type(2n+1) {
    clear: both;
    margin-left: 0;
  }
}

@media only screen and (max-width: 400px) {
  .category .col-3,
  .category .col-3:nth-of-type(3n+1) {
    margin-left: 0;
    width: 100%;
  }
  
  .category .col-3:nth-of-type(2n+1) {
    clear: none;
    margin-left: 0;
  }
}

Cheers. All are done. Now browse your category archive page and enjoy it. 🙂