CSS Opacity

The opacity property specifies the transparency of an element. It allows you to control how much of the content behind the element should be visible.

---

Opacity Property Values

The opacity property can take a value from 0.0 to 1.0. The lower the value, the more transparent the element becomes.

• 0.0 — Fully transparent (invisible)
• 0.5 — 50% transparent
• 1.0 — Fully opaque (default)

/* Example Syntax */
img {
    opacity: 0.5;
}

---

Transparent Hover Effect

The opacity property is commonly used with the :hover selector to change the visibility of an element when a user moves the mouse over it.

.my-box {
    opacity: 0.5;
    transition: opacity 0.5s; /* Smooth effect */
}

.my-box:hover {
    opacity: 1.0;
}

---

Transparent Using RGBA

When you use the opacity property on an element, all of its **child elements** (like text) also become transparent. To make only the **background** transparent, we use RGBA colors.

The difference:

/* Only the background is transparent */
div {
    background: rgba(46, 125, 82, 0.5); /* 50% opacity green */
}

---