35 lines
848 B
Markdown
35 lines
848 B
Markdown
|
---
|
||
|
|
title: CSS3 Opacity Property
|
||
|
|
---
|
||
|
|
## CSS3 Opacity Property
|
||
|
|
|
||
|
|
`opacity` lets you control how transparent an element is on a scale of `0` to `1`.
|
||
|
|
|
||
|
|
If you set the property of an element to `0` it will be transparent. If you set it to `1` it will be opaque.
|
||
|
|
|
||
|
|
Setting an element to `opacity: 0;` does not remove it from the page. The element will still be clickable and impact the flow of the page's content.
|
||
|
|
|
||
|
|
```css
|
||
|
|
.transparent {
|
||
|
|
opacity: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.verySeeThrough {
|
||
|
|
opacity: 0.3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.slightlySeeThrough {
|
||
|
|
opacity: 0.7;
|
||
|
|
}
|
||
|
|
|
||
|
|
.opaque {
|
||
|
|
opacity: 1;
|
||
|
|
}
|
||
|
|
```
|
||
|
|
|
||
|
|
[This simple example](https://jsfiddle.net/1ogmxaf8/1/) shows how you might use opacity with a hover effect.
|
||
|
|
|
||
|
|
#### More Information:
|
||
|
|
* [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
|
||
|
|
* [CSS Tricks Almanac](https://css-tricks.com/almanac/properties/o/opacity/)
|