Сетка. Возникли проблемы с элементом div, находящимся поверх элемента div с непрозрачностью. ⇐ CSS

[Anonymous]

Здесь у меня есть Codepen.
Как следует из названия, у меня нет решений, чтобы понять, как заставить отображаться элемент div, расположенный поверх элемента div с непрозрачностью. Это всего лишь небольшая страница со списками книг. Мне нравится кодировать HTML, но я не очень хорош в этом.
Проблема может показаться простой, но я просил других о помощи, и никто из нас не смог ее решить. Я не решаюсь загрузить всю страницу здесь (это очень много). Наконец, у меня был друг, кодирующий вкладки, так что поверьте мне, я ничего не понимаю в SVG! Сейчас он на пляже и пьет маргариту, иначе я бы спросил его
Хорошо, я попробовал сделать это, и это не сработало:

Код: Выделить всё

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

Код: Выделить всё

Eight

History Mystery

Writers

by semicodin

Подробнее здесь: https://stackoverflow.com/questions/786 ... th-opacity