ShineTime: jQuery & CSS3 Gallery With Animated Shine Effects

This week I’d like to show you how you can create a kick-ass animated Shine Effect with jQuery & CSS3 and then use it to create your very own Shiny Gallery ‘ShineTime’. This effect is useful in making your user interface elements look like they’re a real polaroid photo (or made of glass) and the best part is, it’s not that difficult to achieve.

The animated Shine Effect

The idea behind a Shine Effect is to give your graphics the appearance of being on a glossy surface that have just had a light beam pass over them. This can make them appear to be made of glass and can increase the visual experience your end users see.

Before we get into any code, lets go through the basic concepts behind the effect. We want to pass a light-beam (in this case an image simulating a shine) past our image when the user hovers over it. Now because I wanted to style up today’s gallery so that each thumbnail appeared to float out of it’s container, the steps to achieving the below animation are as follows:

  1. Change the margins of the thumbnail element so that it floats away from it’s container
  2. Set the background-position of your “shine” graphic to be –1 * (it’s total width)
  3. Animate your background-position to value of the total width. Effectively we’re hiding the gloss off-stage and then animating it across the image.