Some ideas for hover animations with a fancy tilt effect. Inspired by the hover effect seen on the Kikk 2015 website.

Today we’d like to share some experimental hover effects with you. The idea is inspired by the hover effect seen on the grid of the Kikk 2015 website which was created by Dogstudio. We want to animate an image (which could be a link or simply a normal grid item) with a tilt effect on its parts. Having several elements in the item (that we call “tilter”), we can achieve a variety of effects that look very interesting. There’s the image, the “shine” element, the semi-transparent overlay with a colorful gradient, a border element and the caption. The examples show some ideas of how all of them (or some of them) can be animated. We hope you enjoy this little set.

For the effect we are using anime.js, the JavaScript animation engine by Julian Garnier.

Attention: Some of these techniques are very experimental and won’t work in all browsers. We’re using things like flexbox, perspective and in the last example we also use blend modes. Slinky browsers only! 😉 Some of these techniques are very experimental and won’t work in all browsers.

The HTML structure of a “tilter” element

This is how we build a titler element. In this case we’re using an anchor:

<a href="#" class="tilter tilter--2"> <figure class="tilter__figure"> <img class="tilter__image" src="img/3.jpg" alt="img03" /> <div class="tilter__deco tilter__deco--shine"><div></div></div> <div class="tilter__deco tilter__deco--overlay"></div> <figcaption class="tilter__caption"> <h3 class="tilter__title">Helen Portland</h3> <p class="tilter__description">Seattle</p> </figcaption> <svg class="tilter__deco tilter__deco--lines" viewBox="0 0 300 415"> <path d="M20.5,20.5h260v375h-260V20.5z" /> </svg> </figure> </a>

As you can see, we have all the aforementioned elements present in this example.

The styles for a “tilter” element

The styles for the tilter element are the following:

.tilter { position: relative; display: block; flex: none; width: 300px; height: 415px; margin: 1.5em 2.5em; color: #fff; perspective: 1000px; } .tilter * { pointer-events: none; } .tilter:hover, .tilter:focus { color: #fff; outline: none; } .tilter__figure, .tilter__image { display: block; width: 100%; height: 100%; margin: 0; } .tilter__figure > * { transform: translateZ(0px); /* Force correct stacking order */ } .tilter__figure { position: relative; } .tilter__figure::before { content: ''; position: absolute; top: 5%; left: 5%; width: 90%; height: 90%; box-shadow: 0 30px 20px rgba(35,32,39,0.5); } .tilter__deco { position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; height: 100%; } .tilter__deco--overlay { background-image: linear-gradient(45deg, rgba(226, 60, 99, 0.4), rgba(145, 58, 252, 0.4), rgba(16, 11, 192, 0.4)); } .tilter__deco--shine div { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.5) 0%, rgba(255, 255, 255, 0.25) 50%, transparent 100%); } .tilter__deco--lines { fill: none; stroke: #fff; stroke-width: 1.5px; } .tilter__caption { position: absolute; bottom: 0; width: 100%; padding: 4em; } .tilter__title { font-family: 'Abril Fatface', serif; font-size: 2.5em; font-weight: normal; line-height: 1; margin: 0; } .tilter__description { font-size: 0.85em; margin: 1em 0 0 0; letter-spacing: 0.15em; }

The JavaScript

In the options we can define what movements each animatable element will have:

We can pass the following: translation and rotation for all axes and animation (duration, easing, and elasticity – same fashion like the anime.js options) to revert to the default style.

For both, translation and rotation, we can define the values per axis in the following way: number : e.g. translation : {x: 10, y: -10} meaning that the element will move along the x-axis from -10px to 10px (as we move the mouse from left to right) and on the y-axis from 10px to -10px (as we move the mouse from top to bottom). array : e.g. translation : {z: [10,100]} meaning that the element will move along the z-axis from 10px to 100px (as we move the mouse from top to bottom)



Initialize: new TiltFx(el, [options]); The options: var options = { movement: { // The main wrapper. imgWrapper : { translation : {x: 10, y: 10, z: 30}, rotation : {x: 0, y: -10, z: 0}, reverseAnimation : {duration : 200, easing : 'easeOutQuad'} }, // The SVG lines element. lines : { translation : {x: 10, y: 10, z: [0,70]}, rotation : {x: 0, y: 0, z: -2}, reverseAnimation : {duration : 2000, easing : 'easeOutExpo'} }, // The caption/text element. caption : { rotation : {x: 0, y: 0, z: 2}, reverseAnimation : {duration : 200, easing : 'easeOutQuad'} }, // The overlay element. overlay : { translation : {x: 10, y: -10, z: 0}, rotation : {x: 0, y: 0, z: 2}, reverseAnimation : {duration : 2000, easing : 'easeOutExpo'} }, // The shine element. shine : { translation : {x: 100, y: 100, z: 0}, reverseAnimation : {duration : 200, easing : 'easeOutQuad'} } } }

We hope you enjoy the effects and find them useful and inspirational!

Chrome Supported

Firefox Supported

Internet Explorer Supported from version E

Safari Supported

Opera Supported

References and Credits