Text over the Featured Image

Can you link us to the webpage in question?

This is what I’m trying to achieve….

Where will this text come from in the dashboard?

Basically I wants move the Post Title up, on to the image.

Please link to a page that you want this to happen on

pl. see the updated image of what I’m trying to accomplish. Essentially I’m trying to move the post title text to be displayed over the featured image, instead of its default position. Everything else will remain as it is in the theme’s default.

I tried <?php echo get_the_title(); ?> with css to move the title over the featured image (similar to what is discussed here ). But, I could not get it displayed at the required location (over the image).

I’ve installed 2015 theme. Would like to add the needed tweaks in a child theme files (css,header,functions etc) to achieve this effect.

Appreciate any suggestions to do this….

Please link us the Webpage (not an image) that you want this to happen on

hi, I’ve created the child theme for Twenty Fifteen.

The child css is updated with `.entry-title h1 {
background-color: Black;
color:white;
font-size: 20px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:600px;
display: block;
}
`
My expectation was the title text <h1 class="entry-title">THEME</h1> would move over the featured image . Also the test will have the ’embossing’ effect due to the text formating.

Though I’m interested in the test formating (for contrast it over the image), the primary need is to make the title text “THEME” move over the featured image.

pl see here what I get after adding the above css code into the child stylesheet.

Andrew, Not sure, what I’ve been trying so far with the child css is the right approach. Appreciate any suggestion, for me to tryout bring the text over the featured image ??

there is a typo in my post above… what I meant is text and not test.

Hi,
what you did with your CSS is actually working. The only problem you may be facing is that your title is actually behind your thumbnail.
I would recommand to use z-index (it works just like layers) in order to put your text in front of the picture…

.single-featured-image {
position:relative;
width: 600px;
overflow:hidden;
z-index: 0;
}

.entry-title h1 {
background-color: Black;
color:white;
font-size: 20px;
position:absolute;
bottom:0px;
left:0px;
padding-left:10px;
padding: 10px;
-moz-opacity:.80;
filter:alpha(opacity=80);
opacity:.80;
width:600px;
display: block;
z-index: 1;
}

hi, i’m very new to wordpress and site developing. i need to know how to do the above “Text over the Featured Image”… Do you change the ‘z-index’ in stylesheet css? is this the best way to go?

Thanks