Tilt Hover Effects

Category: animation, effect, hover, Playground, tilt

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

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! 😉

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!

Browser Support:

ChromeSupported
FirefoxExperimental flag
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

Find this project on Github

View demo Download source

Tilt Hover Effects was written by Mary Lou and published on Codrops.

You must be logged in to post a comment.

blog