Print Reseller Scheme
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

fading images without javascript?

Discussion in 'Website Design Forum:' started by Levi, Feb 5, 2010.

  1. Levi

    Levi Moderator Staff Member

    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?
  2. Harry

    Harry Senior Member

    Webkit only animations, you could do that.
  3. Levi

    Levi Moderator Staff Member

    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 - 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 :)
  4. Harry

    Harry Senior Member

    Possibly. One mo.

    <img src="" width="200" height="200" alt="an image" id="hover" />
    	#hover{		opacity:0.2;		-webkit-transition:opacity 0.1s linear;	}	#hover:hover{		opacity:1;	}
  5. Levi

    Levi Moderator Staff Member

    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}

Share This Page