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.

By Manoela Ilic in Playground on
Demo Code

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? Subscribe and get our Collective newsletter twice a tweek.

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

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.

Creating an Interactive 3D Bulge Text Effect with React Three Fiber

Shape Slideshow with Clip-path

Fullscreen Clip Animation

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 37

Comments are closed.

  4. Awesome work, Manoela!

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

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

  8. 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 🙂

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

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

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

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

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

  21. Looks good BUT it shakes like crazy when you hover it.

    Maybe you can make not it detect the initial mouse position when entering the canvas, instead create the default position at the center of the image, that way it wont snap-tilt and shake

    • If you’re using the Greensock animation library, you can easily replace tiltfx.js’s element stylings in the mousemove and mouseleave event listeners with Greensock’s TweenLite.to() for it to smoothly tween the images.

  22. Cant figure out how to add on my own images. Would love a tutorial on this one, looks great thanks!

  24. Hello
    First grateful for the powerful content
    How do I add the source code to Joomla template?

  29. Sorry for coping this link, I created this effect, by taking two wrong photos with my camera. I remember that exist some cards that you can tilt them and it appears that the background is changing. I dont know how this printed (3d) tilt cards can be called, or how this effect is called. Can you help me out Mary Loo?

  30. Hi this effect is awesome but I have problem with implementation on WordPress page. I added javascript to body, insert image with tilt-effect, add css but after that my image disapeared from my page? What I’m doing wrong? Thanks

  31. is this with or without the js? I only see instructions on the html and css. As a newbie I do not fully know how to implement the js. I know if needed, it must be included in the script tag. But do we tie events to certain element classes or ids? This instruction I do not see here or with the photographic designer portfolio example which is way complex for a newb.