The image is taken from apple.com.

I'm wondering how to recreate this effect of transition from one photo to another (in particular, I want to transition into white background) as shown in the photo:

enter image description here


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.

  • This answer is pretty good, just to add to it. The key is also finding images with empty space at the top / bottom. Roads, grass, sky, ocean, etc... Things that are predominately one color. – Ryan Nov 24 '14 at 12:53
  • Thanks Ryan, that's absolutely true. Image selection is also a key aspect to an overall appealing look. Thank you as well for the correction, that's right. The FAQs do allow these questions! – Johnny Kutnowski Nov 24 '14 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.