How to Create a Slider to Zoom Photos


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

Related Posts
  • Photography
    Shooting an Advertisement for Your Own Photography BusinessWeddingad bl prelg
    Don't have a studio? Think your house is small or ugly? In this tutorial we will look at how to create a high-end look in your own home. We'll go behind the scenes building a magazine advertisement from the ground up, showing what works, what doesn't, and how you get a great look on a budget.Read More…
  • Photography
    Clarity, Vibrance, and Saturation in Adobe Camera RawCamera raw clarity preview retina
    In Adobe Camera Raw, you will find three sliders at the bottom of the Basic Tab. These sliders are Clarity, Vibrance, and Saturation. Each of these adjustments can make a huge difference when applied to your images. In this tutorial, we will explain everything you need to know about Clarity, Vibrance, and Saturation. Let's get started!Read More…
  • Computer Skills
    App Training
    How to Create Greeting Cards With iPhotoIphoto card 400
    It’s that time of year again: shopping for the whole family, decorating the house, and trying to get Christmas cards out at the last minute. In this tutorial, I’ll show you a painless way to create greeting cards -- using iPhoto -- to add that personal touch to your seasonal greetings.Read More…
  • Computer Skills
    How to Highlight Colours in Black and White Photos With ApertureColor icon 2x
    Being able to isolate and edit specific colour ranges is one of the great features of Aperture, allowing for some colourful effects within photos. Whether you're wanting to change the colour of a flower or have a coloured element on a black-and-white backdrop, these types of effects can be quickly and easily achieved within Aperture, Apple's professional photo editing and management app. In this tutorial and screencast, I'll show you how to recreate these types of effects with ease so that you can create your own masterpieces in no-time. Read More…
  • Photography
    Building a Film Style Look in LightroomAc filmgrain prelg
    If there's has been a noticeable trend in post-production in the past few years, it's the enthusiasm for old school, film-style looks. Multiple preset packs and actions exist to take your images back in time. However, in this tutorial, we'll learn how to build and customize our look in three easy steps in Adobe Lightroom.Read More…
  • Computer Skills
    Tips & Shortcuts
    10 Tips for Post-Processing Images in iPhotoIphoto icon
    You don’t need Photoshop to make your photos look good. Not only is it difficult to learn all of the fancy features it offers, it’s also not necessary for you to spend nearly half your Mac’s value on a photo editor when Apple includes one for free. You’ve undoubtedly heard of iPhoto, a photo management app developed by Apple and pre-installed on all Macs. It looks basic, but there’s a lot of power hiding behind that edit button. In this tutorial, I’ll show you ten ways to make your photos look more professional using iPhoto.Read More…