Image Link Rollover Effect

Question

Does anybody know how to make an image link rollover effect similar to what is seen here? Is there maybe a tutorial for this? Changing the opacity of the background and making the eye appear is easy enough but I have no idea how the developer got the cheese wheels to slide in like that.

Screenshots:

Answer 1

It's a combination of two things:

One is changing the position of the wedges on hover (in CSS). I assume you know how to do that.

The other (the one that creates the animation), is specifying a transition time, so that it will move smoothly from one state to the other.

See http://www.w3schools.com/css3/css3_transitions.asp for more details on how transitions work.

Unfortunately, cross-browser support is poor, and each browser uses it's own prefix. The site you pointed to uses:

-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;`