1.6 KiB
1.6 KiB
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