I have a Codepen [here(https://codepen.io/semicodin/pen/WNBVJVd).

As the title says I’m out of solutions to understand how to get a div that’s sitting on top of a div with opacity to show up. This is just a little page of book lists. I like to code HTML but I’m not very good at it. 🙂

The issue would appear to be simple but I’ve asked others for help and none of us can solve it. I hesitate to load the whole page here (it’s a lot). Lastly, I had a friend code the tabs for me so trust me I don’t understand any of the SVG! He’s currently on a beach drinking margaritas or I’d ask him

Okay I tried doing this and it didn’t work:

`.opaq {
    padding: 4.5rem 0 0 0;
    background-color: rgb(255, 255, 255 / .6);
    opacity: 0.6;
}
.solid {
    padding: 4.5rem;
    margin: 0 4.5rem 4.5rem 4.5rem;
    background-color: white;
}
.main {
    padding: 4.5rem;
    font-style: normal;
    text-align: left;
    color: black;
    font-family: 'solway', serif;
    font-size: 2.75rem;
    line-height: 1.08;
    font-weight: bold;
}
`

and this

`

    <div class="content-area">
    <!-- All content goes in here including tables and will sit on top of the image. -->

    <div class="tile">
    <div class="opaq">
    <div class="solid">
    <div class="leadb">
    Eight<br>
    History Mystery<br>
    Writers</div>
    <div class="leadc">
    by semicodin
    </div>

`