Combine images from Adobe Stock with CSS to create more engaging animated images for your website.
Find great photos
Begin your quest on Adobe Stock to find beautiful images for your animation. Adobe Stock allows you to search on a wide range of criteria, including keywords that describe the content of a photo.
Locate a photo that you like and download a preview — or add it to a Creative Cloud Library.
Locate and save another photo of a clear sky full of evening stars.
Mask out the sky
In Photoshop, use a combination of the Quick Select tool and Layer Masks to remove the sky from the city skyline photo. Save the file as a transparent PNG file to preserve the transparency.
Add in a light transparent gradient behind the city in order to simulate the glow of the city lights against the nighttime sky.
Once you have masked out the evening sky, use the convenient Export As option to create a PNG file. In the Export dialog box, be sure to enable the Transparency option so we can see through the image.
Add even more stars
Extend the canvas in Photoshop so the stars photo is large enough to be rotated without showing the edges. Using the Clone Stamp tool, fill the canvas with stars sampled from the original image.
Set in motion with CSS
Add an animation property to the #stars CSS rule and define a few values. Keep the stars moving slowly and consistently by setting a duration of 210 seconds, an animation style of linear and a looping limit of infinite.
The final result
Combining Adobe Stock with CSS allows us to create an engaging animation for your website.
Check out this curated collection from Adobe Stock with more images that you can use in your next project.