How to make the black title box on the slider, in Twenty Fourteen, transparent?

  • MT

    (@mtmtmcclanahancom)


    10 years, 6 months ago

    I want to change CSS to make the black title box, that displays the title of each post in the slider, a degree of transparency, so that the image can be seen behind it. Is this the correct code to alter, and, how would you alter it?

    .featured-content {
    background: #000 url(images/pattern-dark.svg) repeat fixed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    width: 100%;

    https://mtmcclanahan.com/ThePaintersTongue/
    Using Twenty Fourteen

    Thank you

Viewing 2 replies - 1 through 2 (of 2 total)

  • Just add this to your custom.css or child-theme style.css file

    .featured-content .entry-header {
background-color: rgba(0, 0, 0, 0.5);
}

    The 0.5 at the end is the 50% transparency, so you can adjust that as needed.

    Thread Starter MT

    (@mtmtmcclanahancom)

    Thank you janet4now!

    I tried what you initially gave me but didn’t work right off. I found the code below (starting with “filter:alpha”)on another site with a transparent box and put it all together and it worked. It won’t work without the code you gave though.

    Don’t know if there is a cleaner way to write it but it’s working so I’m happy. Thank you again.

    }
    .featured-content .entry-header {
    background-color: rgba(0, 0, 0, 0.5);

    }

    .featured-content .entry-header {
    background-color: #000;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    min-height: 96px;
    overflow: hidden;
    padding: 24px 10px;
    filter:alpha(opacity=7);
    opacity: 0.7;
    }

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make the black title box on the slider, in Twenty Fourteen, transparent?’ is closed to new replies.