Webwork
/
Opacity

Opacity

Source:
<div style=
"opacity:1.0; filter:alpha(opacity=100)">
Web page:
Opacity: 100
Source:
<div style=
"opacity:0.75; filter:alpha(opacity=75)">
Web page:
Opacity: 75
Source:
<div style=
"opacity:0.5; filter:alpha(opacity=50)">
Web page:
Opacity: 50
Source:
<div style=
"opacity:0.25; filter:alpha(opacity=25)">
Web page:
Opacity: 25
Source:
<div style=
"opacity:0.1; filter:alpha(opacity=10)">
Web page:
Opacity: 10
Source:
<div style=
"opacity:0; filter:alpha(opacity=0)">
Web page:
Opacity: 0

(Note: the filter:alpha(opacity=#) tags above are for compatibility with older versions of IE.)

Opacity used to separate text from background

This example actually has two divs floating over the sky image. One div is for the transparent white background and is set for an opacity of 40. It is behind a same-sized div that contains the text. If they were both in the same div, the text would also be transparent and less legible.

Changing Opacity on MouseOver

This simple bit of CSS makes things transparent when the mouse moves over them. This is often used as an alternative way to indicate that the images are links.

Head:
<style type="text/css">
.maketrans:hover
{ opacity:0.5; filter:alpha(opacity=50); }
</style>
Body:
<div class="maketrans"><img src="coolwhip.gif" width="64" height="64" /></div>
<div class="maketrans"><img src="negative.gif" width="64" height="64" /></div>
Web page:
 

And it also works in reverse:

Head:
<style type="text/css" media="screen">
.makelesstrans {
color: #000;
opacity:0.3; filter:alpha(opacity=30);
}
.makelesstrans:hover {
color: #000;
opacity:1.0; filter:alpha(opacity=100);
}
</style>
Body:
<div class="makelesstrans" style="margin: 0 auto; width: 500px"><div style="; float: left; margin: 5px 10px 10px 0"><img src="mfolds.gif" width="64" height="64" alt="mfolds" /></div>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea <a href="#">commodo consequat</a>. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</div>
Web page:
mfolds
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Previous | Webwork Table of Contents | Next >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com