Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

CSS Overlays with Opacity

Published 2 months ago

A CSS overlay is an empty HTML element that is styled with CSS to be overlaid on top of some sort of background image or video. They typically have some sort of dark background associated with them, and are then made transparent using the CSS property opacity.

Opacity determines how opaque or how transparent an element is. It accepts values 0-1, 0 being completely transparent, and 1 being completely opaque. This video will show you how to create your own overlay element with position absolute and opacity properties so you can get a good contrast going between your text elements and the background video behind them.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.