Tilt Hover Effects

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.

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!

• ChromeSupported
• FirefoxSupported
• Internet ExplorerSupported from version E
• SafariSupported
• OperaSupported

References and Credits

• anime.js by Julian Garnier
• Images from Pexels licensed under Creative Commons (CC0) and from Unsplash.com
• ImagesLoaded by Dave DeSandro