Controlling Opacity in CSS

CSS offers two ways to make things transparent: the opacity property and alpha channel colors.

The opacity Property

.faded {
    opacity: 0.5;  /* 50% transparent */
}

.invisible {
    opacity: 0;    /* Fully transparent (but still in layout) */
}

Important: opacity affects the entire element and all its children.

Alpha Channel Colors

For transparent colors (not affecting children), use alpha channels:

/* Only the background is transparent */
.overlay {
    background: rgba(0, 0, 0, 0.5);
    color: white;  /* Text stays fully opaque */
}

.glass {
    background: hsla(0, 0%, 100%, 0.2);
    backdrop-filter: blur(10px);
}

opacity vs rgba — Key Difference

/* opacity: makes EVERYTHING transparent */
.card-opacity {
    background: black;
    color: white;
    opacity: 0.5;   /* Background AND text are 50% transparent */
}

/* rgba: only the background is transparent */
.card-rgba {
    background: rgba(0, 0, 0, 0.5);
    color: white;   /* Text stays fully opaque! */
}

Hover Effects with Opacity

.image-container img {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.image-container:hover img {
    opacity: 0.7;
}