Neat Photo Hover Effect with CSS Sprites and jQuery
Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression that the background gets darker when ...

Here is a very nice effect for photos or some black and white images. We are using some CSS sprites for the photos to create a darken effect when hovering over the images. This could also be used with other effects. The basic principle is to create the impression that the background gets darker when hovering.
The CSS sprites image of each photo gets first loaded in the photo container. Then we add a paragraph element which has the same background image but a different background position (the dark half). This element gets faded in, so we have a smooth effect.
View demoDownload source
Tagged with: CSS jQuery photos sprites
Related Articles
A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additi...
read more
A tutorial about creating a simple grid overlay with subtle transitions for an app showcase. ...
read more
A tutorial on how to create a thumbnail grid with an expanding image preview similar to the effect seen on Google Images....
read more
Learn how to create flexible and fluid grids which make nesting at arbitrary depths easy, while allowing full freedom for how the ...
read more
i like .
Is there anyway to make the background image a link?
LIKE U R SITE, LIKE U R WORK…
KEEP IT UP…
:)
Is there anyway to make the background image a link?
You should create an anchor link before the div tag of the pics. i.e
Is it possible to make this go through 3 stages?
e.g.
[1][2][3]
[1] then mouse over
[2] –> [3] then mouse off
[1]