Studying code… Overlay effect

Sofia portfolio project — Part 1

🏖️Today’s Build Challenge

Expectation

Core keywords

• function: defines a function (a reusable block of code).
• if ~ return: if the condition is true, exit the function immediately. return; (with nothing) just stops the function; it doesn’t return a value.
• if ~ else: choose between two code paths based on a condition.

Functions

function overlayOn() {
  if (!overlay) return;                 // if overlay doesn’t exist, stop
  overlay.style.display = 'block';       // show the element
  overlay.classList.add('is-on');        // add CSS class for extra effects
}

function overlayOff() {
  if (!overlay) return;                  // guard clause
  overlay.classList.remove('is-on');     // remove the effect class
  overlay.style.display = 'none';        // hide the element
}

• !overlay means “overlay is null/undefined”.
• return; here only stops the function; it doesn’t “return a result”.
• .classList.add/remove/toggle() attaches, removes, or toggles a CSS class.

DOM (Document Object Model): the browser’s object representation of your HTML so JavaScript can read/change it.

Related HTML

<div id="overlay"></div>

It is using an id (#overlay), not a class.

Get Lia’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Related CSS

#overlay {
  position: fixed;
  inset: 0;                     /* fill the viewport */
  z-index: 900;
  display: none;                /* hidden by default */
  overflow: hidden;
  /* If you meant white, prefer #fff or #ffffff. 
     (#ffff is valid 4-digit hex RGBA but uncommon.) */
  background: #fff;             
  opacity: 0;                   /* fully transparent */
  transition: opacity .35s ease;
}

#overlay.is-on {
  display: block;
  opacity: 1;                   /* fade in (via transition) */
}

• When .is-on is added, the element is shown and faded in.

Pseudo-elements (visual effects layers)

#overlay::before {
  content: "";
  position: absolute;
  inset: 25%;                                  /* smaller box inside overlay */
  background: linear-gradient(115deg, /* many colors and percents */);
  background-size: 200% 200%;                  /* oversized gradient for motion */
  filter: blur(8px);
  opacity: .65;
  animation: metallicShift 8s ease-in-out infinite alternate;
}

#overlay::after {
  content: "";
  position: absolute;
  inset: -40%;                                 /* larger than overlay */
  background: linear-gradient(120deg, /* rgba colors with percents */);
  mix-blend-mode: screen;                      /* brighten where it overlaps */
  opacity: .55;
  animation: sheenSweep 3.8s ease-in-out infinite;
}

• ::before and ::after are built-in pseudo-elements; content:"" is required to render them.
• inset: 25% makes a smaller inner layer; inset: -40% makes a larger outer layer.
• background-size: 200% 200% overscales the gradient so small position changes look like flowing motion.
• mix-blend-mode: screen blends the ::after highlight so bright parts “glow” over what’s behind.

Animations

@keyframes metallicShift {
  0% {
    background-position: 0% 50%;  /* left, vertically centered */
    transform: translateX(-2%);
  }
  100% {
    background-position: 10% 50%; /* slightly to the right */
    transform: translateX(2%);
  }
}

@keyframes sheenSweep {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

• background-position: 0% 50% → 10% 50% moves the gradient a bit to the right (left → right).
• translateX(-2% → 2%) nudges the layer slightly for a subtle shimmer.
• sheenSweep moves the highlight bar across the screen.

Overall operation (short)

1. HTML has <div id="overlay"></div>.
2. CSS hides it by default and defines two visual layers (::before, ::after) plus animations.
3. overlayOn() shows the element and adds .is-on so the transition/looks apply; overlayOff() reverses that.
4. If overlay isn’t found, both functions just stop (no errors, no action).