If you wanted to style your featured images like this when they are set to the “Above Title” position:

But leave your Single Post featured images looking like this:

There are just a few steps. First, you’ll need two layouts. One for your Home Page or Blog Index with featured images set to above title and one for your posts (either Single or Single » Post) with the featured image position set to something other than “Above Title”.

Now, when you set your featured image position to above title, the CSS class .post-thumbnail-above-title
gets assigned to the anchor tag enclosing the featured image.

<a href="http://dev/in-the-kitchen-at-sunset-for-the-perfect-pose/" class="post-thumbnail post-thumbnail-above-title">

Great, we can use that to style only the featured images set to “Above Title”.

The CSS

The first line, adjusts the margin on the anchor tag enclosing the featured image to negative values for all except the bottom.

The second line sets the padding and border to 0 on the featured image set to the “Above Title” position so there is no white border around the featured image.

The last line, pushes the post title down a little more to create more space between the featured image and the post title.

That’s all there is to it!

Questions, perhaps?

Why use the .custom class in front of my CSS?
I use it to make my code more specific so it will override other CSS applied to the same element using different rules without having to rely on !important.

What is ~ in the last line/rule?
That is the General Sibling Selector. Please see this article at CSS Tricks for more information.

What size should I set my featured images?
It doesn’t matter. You shouldn’t need to adjust the code.

What size should I make my content block
It doesn’t matter. You shouldn’t need to adjust the code.