3d lightweight parallax tilt hover effect on Image and DOM using Tilt.js

3d lightweight parallax tilt hover Effect On Image using Tilt.js

Titl.js is lightweight parallax hover tilt effect for jQuery [Tilt.js].

1HTML

<div data-tilt class="effect">
	<h1>Hover Me</h1>
</div>

<script type="text/javascript" src="https://www.yamicode.com/assets/js/external/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://www.yamicode.com/assets/js/external/tilt.jquery.min.js"></script>

2CSS - Not Required - Just For Demo style!

body, html{
	padding: 0;
	margin: 0;
}
.effect{
	height: 200px;
	width: 200px;
	margin: 0 auto;
	color: #eee;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(62,113,123,1);
	background: -moz-linear-gradient(left, rgba(62,113,123,1) 0%, rgba(105,210,231,1) 50%, rgba(105,210,231,1) 51%, rgba(105,210,231,1) 71%, rgba(105,210,231,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(62,113,123,1)), color-stop(50%, rgba(105,210,231,1)), color-stop(51%, rgba(105,210,231,1)), color-stop(71%, rgba(105,210,231,1)), color-stop(100%, rgba(105,210,231,1)));
	background: -webkit-linear-gradient(left, rgba(62,113,123,1) 0%, rgba(105,210,231,1) 50%, rgba(105,210,231,1) 51%, rgba(105,210,231,1) 71%, rgba(105,210,231,1) 100%);
	background: -o-linear-gradient(left, rgba(62,113,123,1) 0%, rgba(105,210,231,1) 50%, rgba(105,210,231,1) 51%, rgba(105,210,231,1) 71%, rgba(105,210,231,1) 100%);
	background: -ms-linear-gradient(left, rgba(62,113,123,1) 0%, rgba(105,210,231,1) 50%, rgba(105,210,231,1) 51%, rgba(105,210,231,1) 71%, rgba(105,210,231,1) 100%);
	background: linear-gradient(to right, rgba(62,113,123,1) 0%, rgba(105,210,231,1) 50%, rgba(105,210,231,1) 51%, rgba(105,210,231,1) 71%, rgba(105,210,231,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e717b', endColorstr='#69d2e7', GradientType=1 );
}

3Demo -