Grid Having issues with a div sitting on top of a div with opacity

I have a Codepen here.

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;
}

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

Solution

Change this

.opaq {
    padding: 4.5rem 0 0rem 0;

to this

.opaq {
    padding: 4.5rem 0 .25rem 0;

to complete the padding on the .opaq layer at the bottom, giving the design a polished off look.