Monday, June 15, 2015

Image Tilt Effect

Image Tilt 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.

Image Tilt Effect

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.

Image Tilt Effect

An image with the class tilt-effect:

<div class="grid__img">
<img alt="The image" class="tilt-effect" src="img/theimage.jpg" />
</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>

Image Tilt Effect

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!