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.
ImageTiltEffect

From our monthly sponsor: monday.com is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

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:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 37

Comments are closed.
  1. Awesome work, Manoela!

    For those who’re like ‘Oh no, me eyes’ – hellomonday has a similar effect.

  2. The images are really blurry and makes this effect more distracting. Cool concept though.

  3. PLEASE never use this in production. Just because you can do something doesn’t mean you should. For most people, I think this effect would be annoying, but someone who has visual or vestibular issues, this effect can be anything from sickening to straight up painful. For me this immediately triggered a vertigo attack and migraine.

    • I think nothing is wasted in creativity long as it is a positive thing!
      Be a mature in the give an opinion 🙂

  4. So, the effects are very cool and neat, but PLEASE fix the very first image effect, with the house. The fixed border of the image and the inside image effect do not look good at all, however, the other effects with the border not displayed are what make this effect even worth while. I almost didn’t scroll down to see the rest of the options due to the first image demo. Otherwise, great effect and may use this in a subtle way or two.

  5. Cool effects! Can you explain step by step how to insert effect to my pages? What I need to do with your github repository?

  6. Would be great if the plugin could work with accelerometer in mobile and tablets!

  7. Love it! Just love it. I will definitely put this script to good use in my next project

  8. Hey! At first it looks scary because of the blurring effect, however, I like the concept. I will surely add this effect in the slider of some of my web projects to enhance the design. Thanks for sharing this post it enhanced my knowledge on web designing.