3

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

Improve this question

1 Answer 1

Reset to default
3

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.

Improve this answer
2
  • 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, 2014 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, 2014 at 14:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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