Creating an Image-Based Archive Page: Styling

In Part 1 of this tutorial you learned how to create a template file for a custom post type in order to display featured images and titles for each post. You registered a custom post type of ‘animal' and created a file called archive-animal.php to display an archive of animals.

In this tutorial you'll learn the CSS required to add a grid layout to the images and overlay post titles over the images. You'll then learn how to add a hover effect, so the name of the animal only appears when the user hovers their mouse over each image.

Resources You'll Need for This Tutorial

This tutorial uses a child theme with the Twenty Twelve theme as its parent. You'll need a WordPress installation set up with this theme installed (it should be installed as the default). If you're unsure of how to set up a child theme, see the instructions on the WordPress Codex.

You'll also need a code editor with FTP access to your site, unless you're developing locally in which case you won't need FTP.

You'll need the child theme created in Part 1 of this tutorial, with the archive-animal.php template file.

You can download the code bundle, including the child theme files, using the Download link above.

The Archive Page

The archive page you're starting with displays the image and title of each post as shown in the screenshot. In this part of the tutorial you don't need to edit the archive page at all, just the stylesheet for the theme.

The starting archive page without styling

Adding the Grid Layout

To lay the images out in a grid you'll need to use floats. Open your theme's stylesheet and add the following:

.post-type-archive-animal article.entry-content {
	position: relative;
	float: left;
	clear: none;
	margin: 10px;
}

This CSS targets the animals archive by using .post-type-archive-animal, a class which WordPress applies to the body element because the Twenty Twelve theme uses the body_class() function to assign classes to this element.

It removes any clear settings for the article element and adds a float and a margin for layout.

You will now have your post listings in a grid:

Overlaying the Text and Adding Opacity

The next step is to position the title of each post so that it's overlaid over the image, and add a semi-opaque background to improve legibility.

Below the CSS you've already added, add the following:

/* styling to add image overlay and opaque background */
.post-type-archive-animal .entry-content img {
	position: relative;
	overflow: hidden;
	background: transparent;
	float: left;
}

.post-type-archive-animal .archive-title {
	position: absolute;
	text-align: center;
	left: 0;
	bottom: 0;
	width: 140px;
	height: 70px;
	background: rgba(255, 255, 255, 0.5);
	padding: 50px 5px 30px 5px;
	filter: alpha(opacity=50);
}

This does a few things. Firstly, on the .entry-content img element it adds position: relative so that absolute positioning will work for the .archive-title element contained within it, as well as adding a float which ensures the layout works correctly.

Next, for the .archive-title element it adds absolute positioning and sets that up using the left and right values. It adds width, height and padding which add up to 150px by 150px, the size of the thumbnail images in this theme. Finally it adds a semi-opaque background using rgba, with a fallback for IE using filter: alpha(opacity=50).

The images now have the text overlaid with a semi-opaque background:

Titles are now overlaid over images with a semi-opaque background

Adding the Hover Effect

You may decide that you're happy with the archive page as it is. In some cases it's preferable for the titles to be constantly visible. But if you want the images to have greater priority and be visible without text or a background obscuring them when the page first loads, you can add a hover effect, hiding the text until the user hovers the mouse over an image.

To do this, you'll need to edit the styling for the .archive-title class and add some extra styling for the :hover state as follows:

/* styling to add the hover effect */
.post-type-archive-animal .archive-title {
	position: absolute;
	text-align: center;
	left: 0;
	bottom: 0;
	width: 140px;
	height: 70px;
	opacity: 0;
	padding: 50px 5px 30px 5px;
}

.post-type-archive-animal .archive-title:hover,
.post-type-archive-animal .archive-title a:hover  {
	display: block;
	background: rgba(255, 255, 255, 0.5);
	-moz-opacity: 0.7;
	filter: alpha(opacity=50);
	opacity: 1;
}

This provides a slightly different version of the styling for the .archive-title element, with opacity set to 0. The positioning, padding and width are exactly the same as you added earlier for the overlay effect.

It then targets the title and links within it in the hover state, and adds a background and opacity to these. These settings are similar to those you added earlier when adding a semi-opaque background to the titles, but now that background (and the title itself) only appears when the user hovers the mouse over an image.

When the archive page is first loaded, the images appear without any text overlaid:

Text is invisible when the page is loaded

When the user hovers their mouse over one of those images, the title will appear:

When the user hovers over an image, the text appears

You now have a nice archive page using a grid of images with a hover effect for text.

Summary

In these two tutorials, you've learned how to do the following:

Register a custom post type and create a custom archive page to display posts form that post type
Create a custom loop to display a featured image and title for each post on the archive page
Use CSS to lay the images out in a grid
Add an overlay effect for the title of each post so it's overlaid on top of the featured image
Finally, add a hover effect so that the text is invisible until the user hovers over an image

The code required to do this is relatively straightforward and compatible with major browsers, including older versions of IE.

Useful Resources

Codex pages:

Tutorials:

CSS Resources:

HIGHLIGHTS OF THE DAY