CSS Alpha Hover Effect

 

August 8, 2007

Creating a rollover image with css is not all that difficult to do. Typically people will simply change the hover state or use the sliding door technique in order to avoid that in between flicker…but with just a simple bit of css code you can create a time saving and slick alternative!

alpha_css.jpg

Example

Setting this up is very easy and you can apply this to specific elements or in this example all image links. Our first step is to work out a little bit of xhtml.

Create an image link or simply copy the code from my example but obviously change the file name (your_image.jpg) to match your jpg, gif, or png.

Now its time to set up our css. Note: you can change the numbers for more or less alpha.

a img:hover {
filter:alpha(opacity=80); ..-opacity:0.8; opacity:0.8; -khtml-opacity:0.8;
}

That’s all there is to it … the only problem is that it does not validate but works in many modern browsers. If viewed in a browser that does not support the code the image will simply remain the same. Well that’s Ben Blogged!

Group: CSS, Tutorials, Web Design

2 Comments »

 

2 Responses

  1. James wrote @ August 21st, 2007 at 12:44 am

    thanks for sharing this. it’s so easy to add too. as small as an effect that it is, it still helps add to the user experience.

  2. Zap! Bang! Boom! > Blog Archive » Learn How to Create A CSS-Based Image Rollover wrote @ February 15th, 2008 at 8:29 am

    […] Ever wanted to know how to create an image rollover using CSS? It’s a breeze, and BenBlogged.com is gonna show you how. As explained by the site, “Typically people will simply change the hover state or use the sliding door technique in order to avoid that in between flicker…but with just a simple bit of css code you can create a time saving and slick alternative!”Take a look! […]

Comment

You must be logged in to post a comment.