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.
Sweet, I’ll try that immediatly 🙂
Thanks for this short but very nice and helpful post!
You’re very welcome!
Hey Jamie,
is it also possible to position images like in this example above, when they’re inside the Body Text? What I mean is, they are a regular image inside a post-text, but it’s kinda breaking out of the content-block…
Like this example I found on dribbble (Link: https://dribbble.com/shots/1484089-Elastica-Articles/attachments/221999)
Best, Anke
Great but when you resize your browser to mobile screen size the featured image it snap back to its default dasn’t stay fixed.
Hello Can u Post the Exact Code ?? i cant understand im a newbie of Css
Hi Vin,
I did post the exact code. I’m not sure what you are asking for?