Image Tilt Effect

A subtle tilt effect for images. The idea is to move and rotate semi-transparent copies with the same background image in order to create a subtle motion or depth effect.

Today we’d like to share a little image effect with you. The idea is to add a tilt effect to an image by subtly moving copies of layers of semi-transparent divisions with the respective background-image. Maybe you’ve seen this effect already on sites like The DNA project by j.viewz, nclud or Daniel Spatzek’s Website. We’ve implemented this effect in one of our previous demos, the Photography Website Concept, and since we’ve gotten a couple of requests, we thought it would be interesting to create a little plugin so that it can be easily applied to any image.

Attention: This technique uses some CSS properties that only work in modern browsers (i.e. 3D Transforms). The effect only works on hover which means that the effect won’t be viewable on a touch device at this point.

ImageTiltEffect01

How it works

A normal image is replaced with layers of semi-transparent divisions of the same image. Every layer moves according to the configuration, creating a subtle motion effect. The initial image wrapper should have an explicit width and height set so that the divisions can be sized correctly. Have a look at the examples in the demo to see how it’s done.

ImageTiltEffect03

An image with the class “tilt-effect”

<div class="grid__img">
	<img class="tilt-effect" src="img/theimage.jpg" alt="The image" />
</div>

…gets transformed into a stack of divisions with the same background image:

<div class="grid__img">
    <div class="tilt">
        <div class="tilt__back" style="background-image: url(img/theimage.jpg);"></div>
        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
        <div class="tilt__front" style="opacity: 0.7; -webkit-transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); transform: perspective(1000px) translate3d(0px, 0px, 0px) rotate3d(1, 1, 1, 0deg); background-image: url(img/theimage.jpg);"></div>
    </div>
</div>

ImageTiltEffect02

Check out the demo for plugin options and examples. You’ll find some custom example styles in the demo.css.

We hope you enjoy this little plugin and find it useful!

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.