Skip to content

Instantly share code, notes, and snippets.

@martinnormark

martinnormark/tilt.html

Created September 30, 2021 14:36
Show Gist options
  • Save martinnormark/0c48f808038a43999225909ce376583b to your computer and use it in GitHub Desktop.
Save martinnormark/0c48f808038a43999225909ce376583b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
tilt.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Tilt</title>
</head>
<body style="padding: 50px">
<div class="js-tilt" style="width: 300px; height: 300px; background-color: burlywood; display: flex; justify-content: center; align-items: center; overflow: hidden">
<img
src="https://images.unsplash.com/photo-1632993952737-0c2897164db3?ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"
/>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>
<script src="https://unpkg.com/[email protected]/dest/tilt.jquery.min.js"></script>
<script>
$('.js-tilt').tilt({
scale: 1.2,
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment