Add tilt image hover effect in cargo site

In the visually-driven world of web design, creating engaging and interactive elements is crucial to capturing the attention of your audience. One way to achieve this is by implementing tilt image hover effects, which can add a dynamic and modern touch to your Cargo Collective site.

In this tutorial, we’ll explore how to use HTML, CSS, and Tilt.js to craft a stunning Tilt Hover Effect for your Cargo Collective website.

Add page and upload image

Log in to your Cargo Collective account and navigate to the page you want to add the title image hover effect. Upload the image in which you want to add the effect and copy the url of the image because we have to add the image url in the css code.

Add JS in the Global Code editor

Go to the global code editor and paste the code.

<script>
$(document).ready(function() {
setTimeout(function() {
$('.thumbnail').tilt({
scale: 1.04,
glare: true,
maxGlare: 0.5,
easing: "cubic-bezier(.03,.98,.52,.99)",
speed: 400,
maxGlare: 1
});
}, 1000);
});
</script>

Add 3d tilt effect to thumbnail images

Paste this code –

<script>
$(document).ready(function() {
setTimeout(function() {
$('.thumbnail').tilt({
scale: 1.04,
glare: true,
maxGlare: 0.5,
easing: "cubic-bezier(.03,.98,.52,.99)",
speed: 400,
maxGlare: 1
});
}, 1000);
});
</script>

NOTE: Make sure to test the functionality by opening the URL in a new tab; do not test it directly within the editor. Also, ensure you have purchased the Cargo subscription to make the external library work properly.