Blog post title overtop of featured image with a transparent black box under it.

[Jeffrey]

Hello,

I have tried this many different ways, but I can’t seem to crack it. I have attached the web url to see what I’m referring to.

and what I want is for the titles to show up over the featured image, but attached to the bottom, so no matter how it is dynamically sized, the title will always be 20 pixels from the bottom of the image. This is similar to the way that the titles overlay on the Dispatch theme. However, I’d also like to have a semi-transparent black box/background to the text.

What CSS should I be using to get that result over my featured images in that category list?

Thanks in advance for any suggestions.

[David]

Hi there,

Can you provide me with a temporary login to access that URL?
As the URL is hidden to others you can post the details here

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

I’m sorry… I forgot that we had started working on hiding some of the pages from visitors who aren’t logged in.

Try this

[David]

Ok so i can log in but that URL does not take me anywhere ?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

— I’m reconfiguring a few things. I’ll have to send you a new link in a bit.

How can I send you a link so it isn’t visible to the world?

[David]

You can edit your Original Topic and change the Site URL

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

Hi David,

I revised the url, so you should be able to get to it now.

Thanks,

[David]

Try this CSS:

.category-highschoolsports .inside-article {
    position: relative;
}
.category-highschoolsports .entry-header {
    position: absolute;
    bottom: 15px; /* increase value to move up */
    left: 15px; /* increase value to move right */
    padding: 20px;
    background-color: rgba(0,0,0,0.8); /* Adjust RGBA 0.8 value for opacity */
    z-index: 100;
}

BTW – the link was a list of Video posts …. so i hope its the right one 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Jeffrey]

This is exactly what I was looking for! Thank you so much!

[David]

Awesome – glad to be of help

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts