opacity
property
Sets the opacity of an element. 0 is fully transparent, 1 is fully opaque. Affects all children.
Syntax
opacity: 0 to 1;
Example
css
.transparent { opacity: 0; } /* invisible */
.semi { opacity: 0.5; } /* 50% transparent */
.opaque { opacity: 1; } /* fully visible */
.overlay {
background: black;
opacity: 0.7;
}
/* Hover effect */
.img-hover {
opacity: 1;
transition: opacity 0.3s;
}
.img-hover:hover { opacity: 0.8; }