The opacity
property controls how opaque an element is on a scale of 0.0 to 1.0. The lower the value, the more transparent the element is.
You can choose up to what extent you want to make the element transparent. You have to add the following CSS property to achieve the transparency levels.
Fully Opaque
.class-name {
opacity: 1;
}
/* OR */
.class-name {
opacity: 1.0;
}
Semitransparent
.class-name {
opacity: 0.5;
}
Fully transparent
.class-name {
opacity: 0;
}
/* OR */
.class-name {
opacity: 0.0;
}
Alternatively, you can use rgba
to set the opacity of an element:
.class-name{
background-color: rgba(0, 0, 0, .5);
}
This sets the background-color
of an element to black with 50% opacity. The last value in an rgba
value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .5 like above) is equal to 50% opacity.
Image Opacity and Transparency
The opacity
property allows you to make an image transparent by lowering how opaque it is.
Opacity
takes a value between 0.0 and 1.0.
1.0 is the default value for any image. It is fully opaque.
Example
img {
opacity: 0.3;
}
Include filter: alpha(opacity=x)
for IE8 and earlier. The x takes a value from 0-100.
img {
opacity: 0.3;
filter: alpha(opacity=30);
}
Here’s an example of an image set to the parameters in the example above.
You can pair opacity
with :hover
to create a dynamic mouse-over effect.
Example:
img {
opacity: 0.3;
filter: alpha(opacity=30);
}
img:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}
A codepen example to show a transparent image turning opaque on hover
You can create the opposite effect with less code since the image is 1.0 opacity by default
Example:
img:hover {
opacity: 0.3;
filter: alpha(opacity=30);
}
Here's a codepen example to show transparency on mouse-over.
More about CSS
Cascading Style Sheets (CSS)
CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.
CSS allows developers to control how web pages look by “styling” the HTML structure of that page.
CSS specifications are maintained by the World Wide Web Consortium (W3C).
You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript).