Simple CSS transitions for entry elements in Genesis

Inspired by Rafal Tomal's blog, in this tutorial I show how CSS transition and transform properties can be used to smoothly

1. show a background color around entries
2. animate post title and post info down
3. animate read more link up

when an entry in content archives (all listing i.e., non singular pages) that are split into 3 columns is hovered.

The general idea is to use translateY transform to animate an entity up or down by setting negative or positive value respectively. And to make this animation smooth we use ease-in-out transition.

We are going to

• register new image size for featured image
• add a custom class to body element
• create a template_content-archives.php file to be used
• use template_include filter to use the above file

for/on all content archives.

template_content-archives.php will have the code for

• forcing full width content
• using post_class filter to apply Genesis column classes in order to split the entries into 3 columns
• removing the post image that may be set to appear via theme settings and instead display it above the title
• removing post content
• removing entry meta from entry footer and add read more in it

While the tutorial has been written for Genesis Sample child theme it should work with minor adjustments in any Genesis child theme.

Step 1

Add the following in child theme's functions.php: