Search code examples
csshoverrollover-effect

Image Link Rollover Effect

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:

enter image description hereenter image description hereenter image description here

Solution

  • 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;`