-
200701 Mar
Posted in Browsers, CSS3 Previews, Declarations
My client wanted a page showing photographs of all their staff, and the design called for them to be semi-opaque against the page background, going fully opaque on mouseover, like so:
What would be the best way to do this?
One would be to make an image sprite of the images two states:
And use it as
background-imageon the element, swapping to the other state on:hover. One small problem with this is that IE6 only supports:hoveron theatag; another is that because the results are being pulled from a database, you’d have to write a dynamic stylesheet as well, to call the swap on all staff photos.Another option would be to create two separate images of the original, one for each state, and write a Javascript function to swap them over on
mouseover.There are other solutions as well, but none of them are the best way; the best way is to place them in the page with
img, then use the CSS3 opacity declaration for the switch, as so:img { opacity: 0.6; } img:hover { opacity: 1; }Two short lines of code, much quicker, the same effect without any of the hassle.
As with the rest of CSS3, however, one big drawback: no native support in the IE family. It works on just about every other major browser, however.
You can skip to the end and leave a response.
-
Comments
-
01.
You can sort out IE using
filter:alpha(opacity=x);If they’re changing on mouseover I’d expect them to do something when I clicked them (else why do they change?), so you could use an anchor tag & capture the hover in IE too.
Jake.
-
02.
How about using Alpha Filter(“filter: progid:DXImageTransform.Microsoft.Alpha”) in IE to arrive similar effect?
-
03.
I know about the Alpha Filter, but it’s a proprietary declaration. It’s easier than the examples I gave above, but it’s still not the best solution, because it adds unnecessary code.
-
04.
CSS3 FTW!
Seriously, can’t wait til MS put a nice compliant IE X out to the world.
-
05.
Andras Nemeseri says:Comment » March 1st, 2007 at 11:52 pm
Just a note…
The opacity property is unstable in FF 2/mac.It has weird bugs ( ie. if an elem has opacity and appears on the page, all textnode become opaque.. )
Although this bug is fixed in FF 3 alpha..
-
06.
Using opacity is the best solution for this issue. First of all these images are a part of the content so they should be visible to all browsers, not just browsers that support css. And the second reason is that the company might grow. You don’t want to fabricate a new image (do you remember exactly how you made that image in one year?) and change the code in the HTML and in the CSS to just add a picture. If you use opacity you just have to add an image to the HTML.
I recently discovered that Safari has some problems with changing the opacity to ‘1’ onmouseover (on divs, haven’t tried it on images). If you change it to ‘.999’ the problem is almost solved. Almost, since ‘.999’ isn’t the same as ‘1’. This is solved in the latest webkit.
About the alpha filter: I don’t see it as a problem to use this as long as you hide this code from real browsers by using conditional comments. Sure it’s extra code, but extra code is (almost) always needed anyways, so one more line doesn’t seem like a problem. -
07.
impatient says:Comment » March 4th, 2007 at 10:56 am
if we all made it a point to post about how much damned time and money we waste doing web design without the tools of css3 and support in IE then maybe someday sooner the people in charge who only care about money will realize they should use their cash to make shit happen sooner. Better our lives, better our clients sites, better their wallets, better the standards, better IE.
What I like to do is write pretend css that imagines how much quicker and easier and better one of my layouts could have been with css3 (multiple backgrounds/borders, border radius,:before:after,descendant selectors, etc…) sometimes I go too far and imagine clipping masks and text flows using svg paths, backgrounds that worked like actual 16-bit sprites worked in the SNES console games (50% of your interface’s decorative elements in 1 small image), gradients (based on svg files)….I used to have a css/svg/browser wishlist but lost interest in updating it after it got over 1000 items :(
-
08.
[…] opacity er sikkert greit som en kortform for å gjøre noe halvgjennomsiktig slik som css3.info viser i «On opacity and complexity» […]
-
09.
Below opacity code will be work to all of browser. There is different value for different browser.
#alpha { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.80; }you can give to link to image. like as per below example
Put it into Tag.
#alpha_img a { border:5px solid #fc0; }
#alpha_img a:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity: 0.80; }For more info you can ask me on [email protected]
-
10.
Prévia das novas propriedades do CSS 3 | Por Trás Da Web says:Comment » October 22nd, 2009 at 10:40 pm
[…] colors HSLA colors opacity RGBA […]
-
01.
