Tribute Page - Build a Tribute Page

This might be a silly question, but I’m trying to put a semi-transparent box around the main text, but I don’t want the text & image to be transparent either. I tried using the :not pseudo-element, but that doesn’t seem to be doing anything. What am I doing wrong? How can I fix this code?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title id="title">Akira Nishikiyama Fanpage</title>
    <link rel="stylesheet" href="./styles.css">
    <main id="main">
      <h1>Akira Nishikiyama</h1>
      <div class="box">
        <figure id="img-div">
          <img id="image" src="" width="100%" alt="A gif of Akira Nishikiyama from the Yakuza series smoking a cigarette.">
          <figcaption id="img-caption"><i>Simply the best Yakuza character.</i></figcaption>
        <p id="tribute-info">Akira "Nishiki" Nishikiyama is the deuteragonist of Yakuza 0 and the antagonist of Yakuza 1. He is Kiryu, the main protagonist's, brother and is known for his silly and caring personality. </p>
        <p>He has a high sense for fashion and his main goal is to advance in the Yakuza. Nishiki also wants to prove himself as he has a dwindling sense of self-worth and has a massive inferiority complex.</p>
        <p>Click <a id="tribute-link" href="" target="_blank">here</a> to learn more about his character.</p>

      <h2>Here are some facts about Nishiki</h2>

/* file: styles.css */
@media (prefers-reduced-motion: no-preference) {
  * {
    scroll-behavior: smooth;

body {
  background-image: linear-gradient(180deg, rgba(0,0,0,1) 45%, rgba(123,123,132,1) 100%);
  color: #FAF9F6;
  margin: 0;
  padding: 50px;
  font-family: Tahoma;
  text-align: center;
  height: 100%;
  display: flex;
  vertical-align: middle;

.box:not(p, image, img) {
  background: #36454F;
  padding: 30px;
  border-radius: 25px;
  opacity: .5;

img {
  display: block;

#image {
  width: 450px;
  max-width: 100%;
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;

h1 {
  text-align: center;
  color: #DE3163;
  text-decoration: underline;
  font-family: Sans-serif;
  padding: 0.5em;

a {
  color: #DE3163;
  text-decoration: none;

#img-caption {
  color: #E2DFD2;

h2 {
  color: #DE3170;


Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

Challenge: Tribute Page - Build a Tribute Page

Link to the challenge:

would be great if you can share this code in codepen so that we can just play with it there.

Oh, I never heard of that! I’m kinda new to this whole coding thing.
Let me get that set up:


Once you change the opacity of the box, everything in it inherits the opacity as well, so all you have to do is go to each element , inside your box, and change the opacity for them there.

1 Like

Welcome to the forum!

Another option with less code:

Give the element a background-color in rgba, this limits the opacity to the box in your case!

1 Like

Thank you so much! And I never knew about that! I figured out the code I think but I’ll definitely keep this in mind :slight_smile:

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.