CSS Opacity & Transparency
This example page accompanies the article CSS Opacity & Transparency - another feature you may not be familiar with.
Example 1:
This is an example of a paragraph that has been given the CSS setting opacity: 0.3, that will be changed to opacity: 1 when the mouse is moved over any of this area.
Example 2
This is an example of the opacity property being applied to a hyperlinked image.
The image firstly has an opacity of 0.1, set using opacity: 0.1,
which makes the image very faint, almost impossible to see.
Using the pseudo-class :hover we can set the CSS property opacity: 0.6,
making the image less transparent and clearer to see. This effect is usually done using image
replacement techniques, and requires a separate image to be created and maintained. Using CSS
opacity, we can remove the need for any additional images, and create the effect with a single
CSS property.
And finally, we use the pseduo-class :active to set the CSS property opacity: 1,
so that the image is fully shown and not transparent at all. This last bit doesn’t seem to work in Opera, however.
Example 3
This is an example of the rgba CSS property.
We set the background colour of each of these paragraphs to blue, and to have an opacity value of 0.2,
using the CSS background: rgba(0,0,255,0.2);, so that the flower comes through easily.
We then set the background colour to still be blue, but have less transparency, when the user hovers the mouse over a paragraph,
using the CSS background: rgba(0,0,255,0.4);
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
Example 4
This is an example of the rgba CSS property.
We set the background colour of each of these paragraphs to be fully transparent, and then use the CSS property color: rgba(0,0,0,0.3);
to set the colour of the text in each paragraph to be black, but mostly transparent, so that the user can see the flower image coming through the text.
We then set the colour of the text to still be black, but have less transparency, when the user hovers the mouse over a paragraph
using the CSS color: rgba(0,0,0,0.8);
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.
This paragraph is only here to let you use the scroll motion to see the text float over the image, while retaining its transparency.