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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Check out our Collective and stay in the loop.

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!

Manoela Ilic

Editor-in-Chief at Codrops. Designer, developer, and dreamer β€” sharing web inspiration with millions since 2009. Bringing together 20+ years of code, creativity, and community.

Browse amazing websites

πŸ’Žβœ¨ Discover fresh gems in our handpicked exhibition of standout websites that caught our eye.