Hostinicon
GET HOSTING FROM $3.95/MO PLUS A FREE YEAR ON TUTS+ (RRP $180). HURRY OFFER LIMITED. Check it out
Advertisement

How to Create a Slider to Zoom Photos

by
Gift

Get a free year on Tuts+ this month when you purchase a Siteground hosting plan from $3.95/mo

If you’ve ever used a piece of software, like Picasa or iPhoto before, you’ll be aware of the fact that there is a slider at the bottom, which allows you to specify how large each photo should be. Move the slider up a few ticks, and all the photos will zoom in a bit. Thanks to the HTML5 and the new range input, we can mimic this effect rather easily. Along the way, we’ll also learn about a variety of awesome new CSS3 features, including transition, nth-child, rotations, scaling, and more.


Full Screencast


Advertisement