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 […]

By cody in Playground on
Demo Download

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.

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

cody

Cody loves jQuery - he puts the magic into every web application. He is crazy about Curry dishes.

hover

Slideshow with Filter Reveal Effect

How to Add More Fun to a Game: Extending “The Aviator”

Creating a 3D Hand Controller Using a Webcam with MediaPipe and Three.js

The
New
Collective

🎨✨💻 Stay ahead of the curve with handpicked, high-quality frontend development and design news, picked freshly every single day. No fluff, no filler—just the most relevant insights, inspiring reads, and updates to keep you in the know.

Prefer a weekly digest in your inbox? No problem, we got you covered. Just subscribe here.

Feedback 6

Comments are closed.

  6. 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]