Video Thumbnail

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


Premium Features

Download Video

CSS Overlays with Opacity

Published 3 years 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.


Want to participate?

Create a free Chris Courses account to begin


No comments yet, be the first to add one

Providing the lift to launch your development career

© 2024 Chris Courses. All rights reserved.