: Design on apple.com -- how to transition from one photo (color) to another? The image is taken from apple.com. I'm wondering how to recreate this effect of transition from one photo to another

@Carla748

If you're speaking about purely graphics, it's as simple as using the Gradient Tool, preferably on a new layer, with a white to transparent background, clicking and dragging to achieve the desired effect. It doesn't get any more complicated than that.

If you're wondering, however, how to achieve this in your own website development, you can do it by overlaying a new div with a background-image property defined to a gradient.

This Gradient Generator is a fantastic tool for the job, and it gives you the CSS you need to create those gradients. You can then position the div wherever you need it, and by tweaking the gradient and div position, you can transition the image to white or even achieve a transition between two images, just like Apple does on their website.

Vote Up Vote Down