Html Question posted in
Some basic documentation can be found here.

Html – 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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Tim had half of the solution. The other half was to add

    padding: 4.5rem;

    to the style .tile to make the tiling background visible. I don’t know how to split the award for the solution between us so I’m doing it here.


  2. 0

    The issue is due to an incorrect declaration.

    background-color: rgb(255, 255, 255 / .6);
opacity: 0.6;

    Replace the forward slash with a comma and remove the opacity declaration

    background-color: rgb(255, 255, 255, .6);

    Also see I do not want to inherit the child opacity from the parent in CSS

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search