4 replies to this topic

[Mr-Sim]

So within CSS you can use

-webkit-transition: 500ms;   
	-moz-transition: 500ms;

to create a smooth hover effect. Only problem is this doesn't work with the :after / :before psudeo classes. Are there any alternatives?

[-Dexter]

Works fine in Firefox 7: http://jsfiddle.net/F97dP/1/

(Excuse the 5 minute code mess)

Edited by -Dexter, 28 September 2011 - 09:17 PM.

[Mr-Sim]

Sorry, I didn't really say what I meant. Using that -moz-transition & -webkit-transition:250ms;, Ed. Remember that? For example I've used it with the word facebook and that has a logo applied using :before. The text has a smooth nice hover animation but the logo doesn't take advantage of it. Its a sudden hover.

[-Dexter]

Can you post your code? I would help you over IM, but I think it's better to do it here so others can benefit in the future.


I think you're asking if CSS can fade images. The answer is no, since images aren't dynamic. You would need javascript to decrease the opacity of the first image and increase the opacity of the second image when the user hovers.

Edited by -Dexter, 29 September 2011 - 08:43 AM.

[Prash]

Alternative are pretty simple JavaScript if you can't get it done with the CSS3. As Ed said, post up your code. I'm still not sure what you're trying to achieve.