[Support request] Blog post title overtop of featured image with a transparent black box under it.

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

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #1302834
    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.

    #1303105
    David
    Staff
    Customer Support

    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

    #1303430
    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

    #1303485
    David
    Staff
    Customer Support

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

    #1303920
    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?

    #1304569
    David
    Staff
    Customer Support

    You can edit your Original Topic and change the Site URL

    #1305475
    Jeffrey

    Hi David,

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

    Thanks,

    #1305957
    David
    Staff
    Customer Support

    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 🙂

    #1307520
    Jeffrey

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

    #1307571
    David
    Staff
    Customer Support

    Awesome – glad to be of help

Viewing 10 posts - 1 through 10 (of 10 total)
  • You must be logged in to reply to this topic.