More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
.tilt-container {
display: inline-block;
perspective: 1000px; /* Gives a sense of depth */
}
.tilt-container img {
display: block;
width: 300px; /* Change to your desired size */
height: auto;
transition: transform 0.2s ease, box-shadow 0.2s ease;
transform-style: preserve-3d;
will-change: transform;
}
.tilt-image.hovered {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}