in Playground

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
View demo Download Source

From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.

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!

Find this project on Github
View demo Download Source
Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

SlideOutBoxMenu_featured

Slide Out Box Menu

GridLayout_featured

Grid Layout with Scrollable Content View

DistortionHoverEffect

WebGL Distortion Hover Effects

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

Which newsletter would you like to receive?

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

    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

    • 2

      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.

  2. 3

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

  4. 5

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

  9. 11

    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?

  10. 12

    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

  11. 13

    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.

Comments are closed.