opacity: 0.7;

In essence, setting it to 0.7 would be the equivalent of making the object about 70% of its normal opacity. Easy, right? There is a problem, of course, as this only works in modern browsers capable of CSS3 and not IE6/7. Luckily, IE has their own property using alpha-filters to get transparency to work. So, for IE browsers, we’d need to add the following to the class/id:

filter: alpha(opacity=70);

Simple? Well, this is web design, we’re talking about and browser compatibility is never quite that simple. The CSS3 opacity property doesn’t work for older mozilla-based browsers, either. To get the opacity/transparency effect, we’d need to add the following:

-moz-opacity:0.7;

And just to cover our bases, for any webkit-based/Safari browsers, we’ll want to add the following:

-khtml-opacity: 0.7

So our final code, for this site, looks like the following:

.post {
filter: alpha(opacity=70);
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
}

To get the hover effect that changes the opacity, we’ll use the pseudo-class hover on our post class. So the additional code would look like this:

.post:hover {
filter: alpha(opacity=100);
-moz-opacity: 1.0;
-khtml-opacity: 1.0;
opacity: 1.0;
}

Essentially, that tells the browser to display the object at 100% opacity (no transparency) when the mouse hovers over the object. Voila, that’s it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

The design makes use of a few things:

• Some CSS3 (that means for the full effect, please use a good modern browser, e.g. Firefox 3.5+, Chrome, Safari 4, IE9, and my personal favorite, Opera 10).
• My playful side
• An annoying opacity effect, but without it, you wouldn’t be able to see the clouds!
• Google Analytics tracking (finally!)
• My new shift66design logo

This new design was inspired and could not have been completed without the following:

• My lovely wife, Ying-Ying (that’s us right there)
• A middle of the night urge to get this done after sitting on it for the good part of 2 years

That’s it. Enjoy. I may never update this site again.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.