Text Over Featured Image

My cosplay of Xellos from Slayers.

Test Text

Test Text 2

A quick and dirty way of forcing text over the featured image.

This is done using a custom CSS class with a specific position and font size.

As an example This can even be done with multiple classes as shown above,

First you need to apply a CSS class to a piece of text:

Then simply add the appropriate styling to Additional CSS:

/**
 * Crude way of
 * positioning text
 * over featured image.
 */
.featuretext1 {
position: relative;
bottom: 8em;
color: white;
font-size: 5em;
}

.featuretext2 {
position: relative;
bottom: 12em;
color: white;
font-size: 3em;
}

The combination of specific font sizes with specific positions obviously makes this very screen size dependant.

Thus you will have to mess around with some more Additional CSS for various screen sizes.

I’m still not fully satisfied with this so be sure to test it out while fiddling with your browser window.

/**
 * Resizes feature image
 * text and corrects
 * it's positioning
 * on certain sized screens.
 */
@media only screen and (max-width: 1200px) {
	.featuretext1 {
		bottom: 9em;
		font-size: 3em;
	}
	
	.featuretext2 {
		bottom: 11em;
		font-size: 2em;
	}
}
@media only screen and (max-width: 770px) {
	.featuretext1 {
		bottom: 10em;
		font-size: 2em;
	}
	
	.featuretext2 {
		bottom: 12em;
		font-size: 1.5em;
	}
}
@media only screen and (max-width: 550px) {
	.featuretext1 {
		bottom: 8em;
		font-size: 1.7em;
	}
	
	.featuretext2 {
		bottom: 11em;
		font-size: 1.2em;
	}
}

The obvious downside to this method is that the space that would have contained the text is left empty.

This could either be covered up by applying the class to every piece of text in the post…

Although this would just put the empty space at the end of the post instead.

Depending on your theme it may not be noticed either way.

Leave a Reply

%d bloggers like this: