6ec1384d0c
* A few minor punctuation changes Added colon after first Example to match others. Added periods at the end of sentences. Put space between 'MDN web docs', capitalized, added colons. * Correct markdown syntax
1.6 KiB
1.6 KiB
title
| title |
|---|
| Image Opacity and Transparency |
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. 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);
}
Here's 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 Information:
-
w3schools.com: CSS Opacity/Transparency
-
MDN Web Docs: Opacity