www 101

All you need to know about the internet

Have a Question?

If you have any question you can ask below or enter what you are looking for!

How to Recreate Apple TV’s Parallax Thumbnail Rollover Effect

In my previous tutorial I showed you how to use CSS 3D Transforms to create an isometric grid layout. It was quite challenging, since a few browsers such as Firefox have slightly different approaches in regard to how they render elements on a three-dimensional plane. 

In this tutorial we’ll continue exploring 3D Transforms, by building a 3D parallax rollover effect, inspired by Apple TV’s interface. We’ll still be using Envato Elements as inspiration for our content; here’s what we’re working towards:

Hover over the thumbnail and move your cursor around; the thumbnail will lean according to the cursor position and the direction of movement.

Perspective: a Primer

As human beings our visibility is limited up to the vanishing horizon, and our binocular vision creates what we perceive as perspective. Perspective helps us interpret an object to be further away, rather than simply being smaller.

The isometric grid from the previous tutorial does not take “perspective” into account. The grid size–height and width–is actually retained. In reality we should be seeing the farthest side of the grid shrinking due to perspective.

In CSS, we can add perspective to 3D transformation through the perspective() function. It is worth noting that perspective() has to be added before other transform functions such as rotate() and translate() for it to take effect. It also requires a value defining the view distance relative to the element; whether the element should be viewed from afar or near.

That’s how we render a 3D plane with CSS. Now let’s see how we can apply this to create a parallax effect. We’ll start with the HTML:

The HTML Markup

If you followed our previous tutorial thoroughly, you will find the HTML markup to be quite similar. Here we have a div with a class of ItemCard wrapping the name, the image, and the link pointing to one of the items on Envato Elements.

Add the above HTML markup from top to bottom.


We begin by adding some reset styles which, in this case, set the element’s box-sizing to border-box, remove the figure element margin, and make the image fluid.

With that done, we add some styles to the ItemCard. Beyond the aesthetic rules such as border-radius and box-shadow, we define the element transition and transformation including the perspective() function.

For more information on what cubic-bezier() is doing here, check out Guy Routledge’s course:

Meta Styles

Next, we add styles the ItemCard child elements; the item name, the item author name, and the item category. Similarly, the styles define the these elements’ visibility, position, sizing, transitions, and transformations.

3D Rendering

Add the following styles to make the child elements of the ItemCard and the .ItemCard__summary compliant with three-dimensional rendering.


The ItemCard hover state styles define the box-shadow as well the Z axis of some of the child elements:

At this point, you’ll have something which resembles the following:

thumbnail image of one of items in Envato Elements
Initial and hover state styles

Parallax Effect With jQuery

We’re going to harness some jQuery here, so make sure you’re linking to jQuery somewhere from within your document. In CodePen add https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js as an external JavaScript path. 

The parallax effect is applied through two jQuery Events mousemove and mouseout. The mousemove event fires up when the cursor is moving over the target element; in this case,.ItemCard. The mouseout fires when the mouse cursor is already outside the target element.

During the mousemove event, we retrieve the mouse cursor coordinates, determine the ItemCard rotation, and apply these numbers by adding inline styles. During the mouseout event, we strip out the inline style so that the ItemCard returns to its initial position.

And that’s a wrap.

Wrapping Up

In this tutorial we learned how to leverage 3D transformations to build a 3D parallax effect inspired by Apple TV.

Bear in mind, this effect will not work well on touch-enabled devices, so you’ll need to consider some kind of fallback, possibly with Touch Events to replicate the parallax effect–I will leave that on the table for you to tackle!

Useful Resources