Back to overview
Best Viewed: Safari on iOS, Mac OS X, Windows
You can create rich, interactive photo galleries by combining CSS 2D and 3D transforms with CSS transitions. By animating the -webkit-transform CSS property in your code, you can enable hardware-accelerated animations and deliver a top-notch experience in web pages on iPad and iPhone. You can also use CSS gradients to add a highlight to your photos, without having to add an additional image to the web page. Since these effects are defined in CSS, an older browser that doesn't support these properties will simply ignore them and your web page will degrade gracefully, automatically.
In this example:
- Photos are positioned with
- Photos are animated with CSS3 transitions.
- The spotlight effect is drawn with
Viewing this demo using a browser other than the latest version of Safari may not provide you with the experience this demo was designed to showcase.
To ensure the best experience with this demo, simply download Safari. It’s free for Mac and PC and only takes a few minutes to install.Close