Chapter 18: Media Effects Without JavaScript

This chapter explores patterns that feel dynamic even though they do not rely on scripts. Simple selectors, careful layering and a few visual tricks can create moments of focus such as lightboxes, blurred backgrounds and soft image treatments. These patterns work smoothly on all modern browsers and keep the page light and easy to maintain.

Lightbox patterns with target

A lightbox effect draws attention to selected content while dimming or blurring everything behind it. One of the simplest ways to build this is the :target selector. When an element has an id and a link points to it, the browser marks that element as the active target. This creates a moment of focus without scripts.

Imagine a gallery where each thumbnail links to a modal panel. When the panel is the target, it appears above the page. The rest of the page can fade or blur which helps guide the eye gracefully. This works because the :target rule applies only while the link is active.

/* Modal panel */
.modal {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(4px);
}

/* Active when targeted */
.modal:target { display: flex; }

/* Inner box */
.modal__box {
  background: #fff; padding: 1rem; border-radius: .5rem;
  max-width: 400px;
}

The backdrop-filter property softens everything behind the modal. The effect feels natural because the viewer senses the page still exists under the blur. A close link simply points back to # or to a parent section which removes the target state.

Filters and subtle image effects

Filters can change tone without heavy editing tools. With filter you can soften shadows, tint images slightly or add a small atmospheric blur on hover. These effects work on any element including images, backgrounds and even text when used carefully.

.thumb { transition: filter .2s ease; }
.thumb:hover { filter: brightness(1.1) saturate(1.2); }

This gentle shift makes thumbnails feel a little more alive. Larger images can use a softer treatment such as blur(2px) that lifts focus away from the background section below them. Be sparing with blur because strong values can look heavy or artificial.

Refining the home video page

A home video page often mixes still images, short clips and links to deeper content. Lightbox patterns and subtle filters shape that mix without adding scripts. Thumbnails can brighten gently on hover; modal panels can show selected videos; and the page behind the modal can blur so that the viewer’s attention remains fixed on the media.

/* Video modal */
#video1:target + .modal-video {
  display: flex;
}

.modal-video {
  position: fixed; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(0, 0, 0, .4);
  backdrop-filter: blur(5px);
}

.modal-video__frame {
  width: 90vw; max-width: 640px;
  border-radius: .5rem; overflow: hidden;
}

When used together, these small techniques create a calm, cinematic tone even though the page is built only with HTML and CSS. A clean structure, a few links and some careful layering are all that is required to make the page feel surprisingly polished.