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:
|
1 2 3 4 5 6 7 |
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.
|
1 2 3 4 5 6 7 8 |
//* 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 :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
.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. 🙂
Hi, do you have an idea about do the same with the new no-sidebar-pro theme ? thanks !
I think that current code will work on “No-Sidebar” Pro theme also. You will adjust the CSS if require.