fading images without javascript?

[Levi]

I know this type of thing can be done with javascript but I'm trying to minimise the amount of javascript I'm using.

What I want to do is have 2 images one blurred and one normal with the blurred one fading out (I've done a background fade in css already) when on hover, it also needs to be clickable as a link.

Am I right in thinking I should do this with 2 layers and have the blurred one on a higher z axis. Then using css3 transitions fade the alpha channel of the image to 0, this then reveals the lower image. Then add all the relevant links etc to make it clickable.

I know this will only work on the newest browsers (or need to do some extra code for ie) but am I thinking along the right lines?

 

[Harry]

Webkit only animations, you could do that.

 

[Levi]

do you mean the -webkit-transition ones as mozilla and opera support it in their latest beta's too (-moz- and -o- respectively), I really wish they could have just skipped the platform bit though. That's what I've used to do a background colour transition.

I also added a shadow (box shadow) and raised the layer using the z axis (it's a little tab for twitter - see current dev on web.imageresolutions.co.uk/index5.html - best viewed in firefox 3.7, opera 10.5 or webkit) hence my interest in the idea above so it sounds like I can have a little play over the weekend

 

[Harry]

Possibly. One mo.

<img src="http://raamaudio.co.uk/img/dot.gif" width="200" height="200" alt="an image" id="hover" />

	#hover{		opacity:0.2;		-webkit-transition:opacity 0.1s linear;	}	#hover:hover{		opacity:1;	}

 

[Levi]

ta very
I was thinking of something like the below so it's nice to know I was thinking along the right lines

#hover{opacity:1.0; -webkit-transition-property: opacity; -webkit-transition-duration: 0.75s; repeated using mozilla and opera versions}#hover:hover{opacity:1}